Uma visão geral de três ferramentas e técnicas para testar e verificar o contraste de cor acessível do seu design.
Digamos que você tenha um texto em um fundo claro, como este:
Todos os exemplos podem ser lidos por você, mas esse não é o caso para todos.
O contraste de cor acessível é uma prática que garante que o texto seja legível para todos. Às vezes, testar o contraste é fácil e, às vezes, muito difícil. Ao final desta postagem, você terá três novas ferramentas e técnicas para inspecionar, corrigir e verificar o contraste do seu design da Web para lidar com os cenários mais difíceis.
WCAG e contraste de cor
A Iniciativa de acessibilidade na Web do W3C oferece estratégias, padrões e recursos para garantir que a Internet seja acessível para o maior número possível de pessoas. As diretrizes que sustentam esses padrões são chamadas de Diretrizes de Acessibilidade para Conteúdo da Web ou WCAG. A versão estável mais recente, a WCAG 2.1, abrange um requisito importante de acessibilidade: o contraste mínimo.
A relação entre duas cores nas diretrizes WCAG 2.1 é descrita pela proporção de contraste, ou seja, o número obtido ao comparar a luminância de duas cores. A luminância é uma maneira de descrever o quão próxima uma cor está do preto (0%) ou do branco (100%). As WCAG definem algumas regras e algoritmos de cálculo relacionados à taxa de contraste necessária para que a Web seja acessível. No entanto, há problemas conhecidos com esse cálculo. Eventualmente, uma maneira ainda mais confiável será adotada, mas, atualmente, as WCAG são a melhor que temos.
Quais são as regras?
Uma taxa de contraste mais alta é pontuada com um número maior, como 4,5 ou 7 em vez de 3. Para se familiarizar mais com a tabela de pontuação, confira o Verificador de contraste do Polypane.
Como testar o contraste entre cores
Agora que sabemos o que estamos procurando, como podemos testar isso? Aqui estão três ferramentas sem custo financeiro para ajudar você a inspecionar, corrigir e medir o contraste do seu site. Os pontos fortes e fracos de cada um deles serão descritos para que você possa testar com segurança a acessibilidade das cores e do conteúdo do seu site de várias maneiras.
- Pika
Um app MacOS, com capacidade única de mostrar o contraste de qualquer cor em toda a tela, cores em gradientes, cores com transparência e muito mais. A intenção é explícita. Os usuários escolhem manualmente os pixels para comparar. Um pouco menos automatizado, com um grande ganho de recursos. - VisBug
É uma extensão para vários navegadores que exibe exclusivamente mais de uma sobreposição de contraste por vez. No entanto, como o DevTools, às vezes não consegue detectar intents. - Chrome DevTools
O DevTools está integrado ao Chrome e tem várias maneiras de inspecionar, corrigir e depurar problemas de cor, mas tem limitações na inspeção de gradientes e cores semitransparentes e, às vezes, não é capaz de detectar intents.
Pika (aplicativo macOS)
Se o DevTools ou o VisBug não puder avaliar o contraste corretamente, como quando você precisar testar uma cor fora do navegador ou quando a transparência ou os gradientes estiverem envolvidos, Pika está aqui para salvar o dia. A Pika tem acesso a cada pixel na tela porque é uma ferramenta do sistema, e não da Web.
Isso também significa que a UX para usar o Pika é diferente do DevTools ou do VisBug. O DevTools e o VisBug fazem o possível para mostrar as cores de texto e de plano de fundo do DOM do navegador, enquanto as cores que Pika compara são escolhidas manualmente em qualquer ponto da tela. Isso dá à Pika mais controle e abre alguns outros casos de uso:
- Comparar duas cores independentemente de estarem ou não no navegador. Se você vir a cor na tela, faça um teste.
- Comparar cores com transparência.
- Comparar cores em gradientes.
- Comparar cores que estão usando modos de combinação, como o modo de mistura no CSS.
Comparar duas cores
Comparar o texto a uma cor de plano de fundo:
Comparar as cores de traço e preenchimento de gráficos vetoriais:
Comparação de cores com transparência
Compare a cor do texto com uma variedade de pixels de amostra de plano de fundo. Aqui, o cinza mais claro do efeito de vidro fosco é usado como a cor de comparação do plano de fundo.
Como comparar cores com gradientes
Compare o texto em um gradiente ou em uma imagem. Aqui, o L de "Lasso" é comparado com o azul-claro da imagem:
VisBug
O VisBug é uma ferramenta inspirada no FireBug para designers e desenvolvedores inspecionarem visualmente, depurarem e brincarem com o design de sites. O objetivo é ter uma barreira de entrada menor do que o Chrome DevTools para emular a interface e UX das ferramentas de design que as pessoas já conhecem e adoram usar.
Teste o VisBug ou instale no Chrome, Firefox, Edge, Brave ou Safari.
Uma de suas ofertas é a ferramenta de inspeção de acessibilidade.
Inspecione em vários navegadores (e até mesmo em dispositivos móveis)
Depois de clicar na ferramenta de inspeção de acessibilidade, qualquer item para o qual o usuário apontar ou navegar pelo teclado terá as informações de acessibilidade informadas na dica. Esta dica inclui comparações de cores entre as cores de primeiro e segundo planos descobertas.
Inspecionar um ou vários
O DevTools pode analisar um único par de cores ou gerar um relatório de todos os pares de cores na página, mas o VisBug oferece um meio-termo, permitindo vários pares de cores. Clique em um elemento e a dica permanecerá disponível. Mantenha a tecla Shift pressionada e continue clicando em outros elementos. Todas as dicas vão continuar no mesmo lugar:
Isso é especialmente importante para o design baseado em componentes, em que várias partes de um componente precisam passar pontuações de taxa de contraste. Com esse método, é possível ver todas essas partes do componente de uma só vez. Também é ótimo para revisões de design.
Chrome DevTools
Se você tem o Chrome instalado, já está equipado com muitas ferramentas de teste de contraste:
- Seletor de cores
- Dica de inspeção
- Visão geral do CSS
- Farol
- Console JS
- Ferramentas de emulação para daltônicos
- Emulação de preferência de contraste de cores do sistema (link em inglês)
- Experimento das APCA das WCAG 3.0
Seletor de cores do Chrome DevTools
No painel "Styles" do Chrome DevTools do painel "Elements", os valores de cor terão uma pequena amostra visual de quadrado ao lado deles. Ao clicar nessa amostra, você verá a ferramenta de seleção de cores. Se possível, o meio da ferramenta vai mostrar o contraste da cor em um primeiro ou segundo plano.
No exemplo a seguir, o seletor de cores é aberto para um valor de cor da propriedade personalizada. A pontuação da taxa de contraste é relatada como 15,79 e tem duas marcas de seleção verdes, indicando que a pontuação atende aos requisitos AA e AAA WCAG 2.1:
Correção automática do seletor de cores
Ver a pontuação enquanto escolhe cores é útil, mas o Chrome DevTools tem um recurso adicional para correção automática. Quando o seletor de cores informa uma pontuação de contraste de cores acessível com falha, ele pode ser expandido para revelar os valores desejados de pontuação AA e AAA, além de uma ferramenta de conta-gotas. Ao lado de AA e AAA, há amostras e um ícone de atualização que, quando clicado, encontra a cor de passagem mais próxima para você:
Se você não é exigente com relação a cores, o recurso de correção automática é uma ótima maneira de atender às diretrizes de acessibilidade e não se esforçar muito para realizar a tarefa.
Dica de inspeção
A ferramenta de seleção de elementos tem um recurso especial que informa
informações gerais de fonte, cor e acessibilidade ao passar o cursor na página. A ferramenta de seleção de elementos
é o ícone à esquerda na captura de tela abaixo. É a caixa com um cursor de seta
no canto inferior direito. Também é possível selecioná-la usando a tecla de atalho
Control+Shift+C (ou Command+Shift+C no MacOS).
Depois de ativado, o ícone ficará azul e apontar para qualquer coisa na página mostrará a seguinte dica de inspeção rápida:
Em vez da ferramenta de seleção de cores, que exige que você encontre a amostra de cor no painel "Estilos", essa ferramenta permite que você simplesmente passe o cursor pela página para conferir as pontuações de contraste. Assim como o seletor de cores, ele só pode mostrar uma pontuação de contraste por vez.
Toque na barra para passar 🎶
Muitas vezes, inspeciono um par de cores com essa ferramenta de inspeção rápida e acho que ele está bem perto da proporção necessária. Em vez de usar o recurso de correção automática do seletor de cores (porque sou exigente), eu recomendo os canais de cores no CSS e assisto até passar a proporção necessária. Eu chamo esse processo de "bump bump til you pass" porque vou aumentar os números dos canais de cores até que eles passem nas WCAG 2.1.
As etapas são as seguintes e precisam ser seguidas na ordem exata:
- Defina o foco do teclado dentro de uma cor no painel "Estilos".
- Ative a ferramenta de inspeção de elemento com o atalho de teclado
Control+Shift+C(ouCommand+Shift+Cno MacOS). - Passe o cursor sobre um alvo.
- Pressione para cima/para baixo no teclado para alterar os números no valor da cor.
Isso funciona porque o valor do estilo CSS ainda tem o foco do teclado, enquanto o mouse permite que você aponte para um alvo. Não clique na meta, ou o foco será movido da área de valor da cor e não permita que você desloque mais valores até que o foco seja refocado.
Visão geral do CSS
Até agora, o Chrome DevTools forneceu maneiras de analisar um par de cores de cada vez, mas a Visão geral do CSS pode rastrear a página inteira e apresentar todos os pareamentos inacessíveis de uma só vez:
Leia mais sobre esse recurso na postagem Visão geral do CSS: identifique possíveis melhorias de CSS ou assista Jecelyn Yeen no YouTube na série "Dicas do DevTools" para aprender a identificar possíveis melhorias no CSS com o painel de visão geral de CSS.
Farol
O Lighthouse é outra ferramenta de auditoria no Chrome DevTools. Ele pode rastrear sua página e informar pares de cores inacessíveis. Ela apresenta pequenas capturas de tela de cada pareamento de cores para você analisar, ser aprovado ou reprovado. Qualquer combinação com falha afetará negativamente sua pontuação no Lighthouse.
Veja a aparência desses resultados:
O console JS
Talvez todas as ferramentas listadas até agora não estejam onde você está. Talvez onde você esteja (o dia todo) seja em JavaScript. Confira um experimento. O painel "Issues" do console pode informar constantemente qualquer problema de acessibilidade de contraste de cores durante a criação. Ative o recurso em Configurações > Experimentos, conforme mostrado abaixo:
Em seguida, abra o painel "Issue" (Problema) e veja se ele fez alguma descoberta. Se for o caso, eles podem ficar assim:
Emulação para daltônicos
A respeito do contraste de cores e da garantia de pares de cores acessíveis, vale a pena apontar a ferramenta de emulação de deficiências visuais. Isso vai mudar as cores ou a aparência do seu design para demonstrar os resultados de diferentes variedades de daltonismo, oferecendo a oportunidade de modificar o design para que a cor não seja a única maneira de a UX se comunicar com um usuário.
Não é uma prática de acessibilidade segura usar exclusivamente cores para representar informações, como vermelho para mal e verde para o bem. Algumas pessoas não veem os verdes ou os vermelhos da mesma forma, e essa ferramenta de emulação ajudará você a experimentar e se lembrar disso.
Emulação de preferência do sistema de contraste de cores
Cada vez mais, os usuários estão mudando as configurações de contraste no sistema operacional. Assim, eles podem solicitar uma personalização menor ou maior na interface. O CSS pode usar essa configuração, assim como com as preferências de tema claro ou escuro. O Chrome DevTools oferece a capacidade de emular essa preferência para que os designs possam testar e se adaptar à solicitação do usuário sem alternar a configuração do sistema.
Teste WCAG 3.0 APCA
Outro experimento é testar seus pares de cores com o sistema experimental de pontuação de proporção de cores APCA. Ativada em Configurações > Experimentos, ela substitui o sistema de proporção WCAG 2.1 por um algoritmo de verificação de contraste mais recente e aprimorado, permitindo visualizar os resultados à medida que a proposta trabalha em direção a um padrão.
Depois da ativação, use a dica de inspeção de ponto ou o seletor de cores para conferir a pontuação de pareamento de cores e se ela é aprovada:
Conclusão
O contraste de cores é uma peça importante do quebra-cabeça para acessibilidade na Web, e aderir a ele torna a Web mais utilizável para o maior número de pessoas nas situações mais variadas. Espero que essas três ferramentas ajudem você a se sentir capaz de fazer ótimas escolhas de cores.