Uma visão geral de três ferramentas e técnicas para testar e verificar o contraste de cores acessível do seu design.
Digamos que você tenha um texto em um plano de fundo claro, como este:
Embora todos os exemplos possam ser legíveis para você, esse não é o caso para todos.
O contraste de cores acessível é uma prática que garante que o texto seja legível para todos. Às vezes, testar o contraste é fácil, mas às vezes é muito difícil. Ao final deste post, você terá três novas ferramentas e técnicas para inspecionar, corrigir e verificar o contraste do seu web design para lidar com os cenários mais difíceis.
WCAG e contraste de cores
A Iniciativa de Acessibilidade da Web do W3C (link em inglês) 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 Web (WCAG, na sigla em inglês). A versão estável mais recente, WCAG 2.1, abrange um requisito de acessibilidade importante: contraste mínimo.
A relação entre duas cores nas WCAG 2.1 é descrita pela taxa de contraste, ou seja, o número que você recebe ao comparar a luminância de duas cores. A luminância é uma forma 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 sobre qual deve ser essa taxa de contraste para que a Web seja acessível. No entanto, há problemas conhecidos com esse cálculo. No futuro, uma maneira ainda mais confiável será adotada, mas, no momento, as WCAG são o 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 com a tabela de pontuação, confira o verificador de contraste do Polypane (link em inglês).
Como testar o contraste entre cores
Agora que sabemos o que estamos procurando, como testamos isso? Confira 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 serão descritos para que você possa testar com confiança a acessibilidade das cores e do conteúdo do seu site de várias maneiras.
- Pika
Um app para macOS que mostra o contraste de qualquer cor na tela inteira, 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, mas com um grande ganho de recursos. - VisBug
Uma extensão para vários navegadores, capaz de mostrar mais de uma sobreposição de contraste por vez, mas, como o DevTools, às vezes não consegue detectar a intenção. - Chrome DevTools
O DevTools é integrado ao Chrome e oferece várias maneiras de inspecionar, corrigir e depurar problemas de cores, mas tem limitações ao inspecionar gradientes e cores semitransparentes e, às vezes, não consegue detectar a intenção.
Pika (aplicativo para macOS)
Se o DevTools ou o VisBug não conseguirem avaliar o contraste corretamente, como quando você precisa testar uma cor fora do navegador ou quando há transparência ou gradientes envolvidos, o Pika pode ajudar. O Pika tem acesso a todos os pixels na tela porque é uma ferramenta do sistema, 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 do texto e do plano de fundo do DOM do navegador, enquanto as cores que o Pika compara são escolhidas manualmente em qualquer ponto da tela. Isso dá ao Pika mais controle e abre alguns casos de uso adicionais:
- Comparar duas cores, independentemente de estarem ou não no navegador. Se você puder ver na tela, poderá testar.
- Comparação de cores com transparência.
- Comparação de cores em gradientes.
- Comparar cores que usam modos de combinação, como mix-blend-mode em CSS.
Comparação de duas cores
Compare o texto com uma cor de plano de fundo:
Compare 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 do plano de fundo. Aqui, o cinza mais claro do efeito de vidro fosco é usado como a cor de comparação do plano de fundo.
Comparação de 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, depurarem e testarem visualmente o design do site. Ele tem uma barreira de entrada menor do que o Chrome DevTools, emulando a interface e a UX das ferramentas de design que as pessoas conhecem e adoram usar.
Teste o VisBug ou instale no Chrome, Firefox, Edge, Brave ou Safari.
Uma das ferramentas oferecidas é a ferramenta de inspeção de acessibilidade.
Inspecionar em vários navegadores (e até mesmo em dispositivos móveis)
Depois de clicar na ferramenta de inspeção de acessibilidade, as informações de acessibilidade de qualquer elemento apontado pelo usuário ou acessado pelo teclado serão mostradas na dica. Essa dica inclui comparações entre as cores de primeiro plano e de fundo 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 interessante, permitindo vários pares de cores. Clique em um elemento para que a dica permaneça. Mantenha a tecla Shift pressionada e continue clicando em outros elementos. Todas as dicas vão permanecer no lugar:
Isso é especialmente importante para o design baseado em componentes, em que várias partes de um componente precisam passar nas pontuações de proporção de contraste. Esse método permite ver todas as partes do componente de uma só vez. Também é ótimo para revisões de design.
Chrome DevTools
Se você tiver o Chrome instalado, já terá muitas ferramentas de teste de contraste:
- O seletor de cores
- Dica de inspeção
- Visão geral de CSS
- Farol
- O console JS
- Ferramentas de emulação de daltonismo
- Emulação de preferência de contraste de cor do sistema
- Experimento do APCA das WCAG 3.0
O seletor de cores do Chrome DevTools
No painel "Estilos" do Chrome DevTools, os valores de cor têm uma pequena amostra de cor quadrada ao lado deles. Ao clicar nessa amostra, a ferramenta de seletor de cores vai aparecer. Se possível, o meio da ferramenta vai mostrar o contraste da cor em relação ao primeiro ou segundo plano.
No exemplo a seguir, o seletor de cores é aberto para um valor de cor de propriedade personalizada. A pontuação da proporção de contraste é informada como 15,79 e tem duas marcas de seleção verdes, indicando que a pontuação atende aos requisitos AA e AAA das WCAG 2.1:
Correção automática do seletor de cores
Ver a pontuação ao escolher 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 cor acessível com falha, ele pode ser expandido para revelar as metas 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 aprovação mais próxima para você:
Se você não se importa muito com as cores, o recurso de correção automática é uma ótima maneira de atender às diretrizes de acessibilidade sem muito esforço.
Dica de inspeção
A ferramenta de seleção de elementos tem um recurso especial durante a passagem do cursor pela página que informa
dados gerais de fonte, cor e acessibilidade. A ferramenta de seleção de elementos
é o ícone à esquerda na captura de tela a seguir. É a caixa com um cursor de seta
no canto inferior direito. Ela também pode ser selecionada usando a tecla de atalho
Control+Shift+C (ou Command+Shift+C no MacOS).
Depois de ativado, o ícone vai ficar azul, e apontar para qualquer elemento na página vai mostrar a seguinte dica de inspeção rápida:
Em vez da ferramenta de seletor de cores, que exige que você encontre a amostra de cor no painel "Estilos", essa ferramenta permite que você simplesmente aponte para a página para ver as pontuações de contraste. Assim como o seletor de cores, ele só pode mostrar uma pontuação de contraste por vez.
Bump bump 'til you pass 🎶
Costumo inspecionar uma combinação de cores com essa ferramenta de inspeção rápida e descubro que ela está um pouco abaixo da proporção necessária. Em vez de usar o recurso de correção automática do seletor de cores (porque sou exigente), ajusto os canais de cores no CSS e observo até atingir a proporção necessária. Eu chamo esse processo de "bump bump til you pass" porque estou aumentando os números dos canais de cores até que eles passem na WCAG 2.1.
As etapas são as seguintes e precisam ser feitas na ordem exata:
- Defina o foco do teclado em uma cor no painel "Estilos".
- Ative a ferramenta de inspeção de elementos com o atalho de teclado
Control+Shift+C(ouCommand+Shift+Cno MacOS). - Aponte para um alvo.
- Pressione as setas para cima/baixo no teclado para mudar 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 destino. Não clique no alvo, ou o foco vai sair da área de valor de cor e não será possível ajustar os valores até que o foco seja redefinido.
Visão geral de CSS
Até agora, o Chrome DevTools oferecia maneiras de analisar um par de cores por vez, mas a Visão geral do CSS pode rastrear toda a página e apresentar todos os pares inacessíveis de uma só vez:
Leia mais sobre esse recurso nesta postagem Visão geral do CSS: identifique possíveis melhorias de CSS ou assista a Jecelyn Yeen no YouTube na série "Dicas do DevTools" ensinando como identificar possíveis melhorias de CSS com o painel "Visão geral do CSS".
Farol
O Lighthouse é outra ferramenta de auditoria no Chrome DevTools. Ele pode rastrear sua página e informar combinações de cores inacessíveis. Ele mostra pequenas capturas de tela de cada combinação de cores para você analisar, aprovando ou reprovando. Qualquer combinação com falha vai afetar negativamente sua pontuação do Lighthouse.
Veja como esses resultados podem ser:
O console JS
Talvez todas as ferramentas listadas até agora não estejam disponíveis onde você está. Talvez você esteja (o dia todo) no JavaScript. Veja um experimento para testar. O painel "Problemas" 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 "Problemas" e veja se ele fez alguma descoberta. Se isso acontecer, elas podem ficar assim:
Emulação de daltonismo
Ainda sobre o contraste de cores e a garantia de combinações de cores acessíveis, vale a pena destacar 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 tipos de daltonismo, a você a oportunidade de modificar seu 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 ruim e verde para bom. Algumas pessoas não veem os verdes ou vermelhos da mesma forma, e essa ferramenta de emulação vai ajudar você a experimentar e 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, o que permite pedir mais ou menos personalização de contraste na interface. O CSS pode usar essa configuração, assim como 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 o APCA do WCAG 3.0
Outro experimento é testar as combinações de cores com o sistema experimental de pontuação de proporção de cores da APCA. Ativado em Configurações > Experimentos, ele substitui o sistema de proporção WCAG 2.1 por um algoritmo de verificação de contraste mais recente e aprimorado, permitindo que você visualize os resultados conforme a proposta se aproxima de um padrão.
Depois de ativar, use a dica de inspeção de pontos ou o seletor de cores para conferir a pontuação de combinação de cores e se ela é aprovada:
Conclusão
O contraste de cores é uma peça importante do quebra-cabeça da acessibilidade na Web, e aderir a ele torna a Web mais utilizável para o maior número de pessoas nas mais variadas situações. Esperamos que essas três ferramentas ajudem você a fazer ótimas escolhas de cores.