Se você tem boa visão, talvez presuma que todos percebem cores, ou legibilidade do texto, da mesma maneira que você. Claro, esse não é o caso. Como você pode imaginar, algumas combinações de cores que algumas pessoas conseguem ler bem são difíceis ou impossíveis para outras. Isso geralmente é causado pelo contraste de cores, a relação entre a luminância das cores do primeiro e segundo planos. Quando as cores são semelhantes, a taxa de contraste é baixa. Quando elas são mais diferentes, a taxa de contraste é maior.
As diretrizes da WebAIM recomendam uma taxa de contraste AA (mínimo) de 4.5:1 para todo o texto. Há exceções para textos muito grandes (de 120% a 150% maiores que o corpo padrão), em que a proporção pode cair para 3:1. Observe a diferença nas proporções de contraste mostradas aqui:
A taxa de contraste de 4,5:1 foi escolhida como nível AA porque compensa a perda na sensibilidade ao contraste geralmente sofrida por usuários com perda de visão equivalente a aproximadamente 20/40 de visão. 20/40 é comumente relatada como a acuidade visual típica de pessoas com aproximadamente 80 anos. Para usuários com deficiências visuais ou deficiências de cor, podemos aumentar o contraste até 7:1 para o corpo do texto.
Você pode usar a auditoria de acessibilidade no Lighthouse para verificar o contraste de cores. Para gerar o relatório:
- Abra o DevTools.
- Clique em Auditorias.
- Selecione Acessibilidade.
O Chrome também inclui um recurso experimental para ajudar você a detectar todo o texto de baixo contraste na página. Você também pode usar sugestões de cores acessíveis para corrigir o texto de baixo contraste.
Para ver um relatório mais completo, instale a Extensão de insights de acessibilidade. Os relatórios do Fastpass incluem detalhes sobre todos os elementos que não passam nas verificações de contraste de cores.
Algoritmo de contraste perceptivo avançado (APCA, na sigla em inglês)
O Algoritmo de Contraste Perceptual Avançado (APCA, na sigla em inglês) é uma nova maneira de calcular o contraste com base em pesquisas modernas sobre percepção de cores.
Em comparação com as diretrizes AA e AAA, a APCA depende do contexto.
O contraste é calculado com base nos seguintes recursos:
- Propriedades espaciais (peso da fonte e tamanho do texto)
- Cor do texto (diferença de claridade percebida entre o texto e o plano de fundo)
- Contexto (luz ambiente, ambiente e finalidade do texto)
O Chrome inclui um recurso experimental para substituir as diretrizes de taxa de contraste AA/AAA pela APCA.
Não transmita informações apenas pela cor
Há cerca de 320 milhões de pessoas no mundo todo com deficiência visual de percepção de cor. Cerca de 1 em 12 homens e 1 em 200 mulheres têm algum tipo de daltonismo, o que significa que cerca de 5% dos usuários não acessarão seu site da maneira pretendida. Confiar na cor para transmitir informações leva esse número a níveis inaceitáveis.
Por exemplo, em um formulário de entrada, um número de telefone pode ser sublinhado em vermelho para mostrar que é inválido. Para um usuário deficiente em cores ou que usa leitor de tela, essas informações são transmitidas incorretamente ou não são transmitidas. Por isso, você precisa sempre tentar oferecer vários caminhos para o usuário acessar informações críticas.
A lista de verificação WebAIM afirma na seção 1.4.1
que "a cor não pode ser usada como o único método de transmissão de conteúdo ou
distinção de elementos visuais". Ela também observa que "a cor sozinha não deve ser
usada para distinguir links do texto ao redor", a menos que atenda a determinados
requisitos de contraste. Em vez disso, a lista de verificação recomenda adicionar outro indicador, como um sublinhado (usando a propriedade text-decoration do CSS) para indicar quando o link está ativo.
Uma maneira básica de corrigir o exemplo anterior é adicionar uma mensagem ao campo, anunciando que ele é inválido e por quê.
Ao criar um app, tenha esse tipo de coisa em mente e cuidado com áreas em que você pode estar dependendo demais da cor para transmitir informações importantes.
Se você quiser saber como seu site é mostrado para diferentes pessoas ou se depende fortemente do uso de cores na sua interface, use o DevTools para simular várias formas de deficiência visual. O Chrome inclui o recurso Emular deficiências visuais. Para acessá-lo, abra o DevTools e a guia Rendering na gaveta. A partir daí, é possível emular as seguintes deficiências de cor:
- Protanopia: incapacidade de perceber luz vermelha.
- Deuteranopia: incapacidade de perceber luz verde.
- Tritanopia: incapacidade de perceber luz azul.
- Acromatopsia: incapacidade de perceber qualquer cor, exceto tons de cinza (extremamente raro).
Modo de alto contraste
O modo de alto contraste permite que o usuário inverta as cores do primeiro e segundo planos, o que geralmente ajuda o texto a se destacar melhor. Para alguém com baixa visão, o modo de alto contraste pode facilitar muito a navegação pelo conteúdo da página. Existem algumas maneiras de obter uma configuração de alto contraste na sua máquina:
Sistemas operacionais como o Mac OSX e o Windows oferecem modos de alto contraste que podem ser ativados para tudo no nível do sistema.
Um exercício útil é ativar as configurações de alto contraste e verificar se toda a interface do app ainda está visível e usável.
Por exemplo, uma barra de navegação pode usar uma cor de plano de fundo sutil para indicar qual página está selecionada. Se você a visualizar em uma extensão de alto contraste, essa sutileza desaparece completamente, e, com ela, também a compreensão do leitor sobre qual página está ativa.
Da mesma forma, no exemplo anterior, o sublinhado vermelho no campo de número de telefone inválido pode ser exibido em uma cor azul-esverdeada difícil de distinguir.
Se você está atendendo às taxas de contraste abordadas anteriormente, não precisa se preocupar com o modo de alto contraste. No entanto, para ter mais tranquilidade, considere instalar a extensão de alto contraste do Chrome e dar uma olhada na sua página para verificar se tudo funciona e tem a aparência esperada.