Daltonismo e Design Web: O Que Precisa de Saber

Mais comum do que a maioria dos designers imagina

A deficiência da visão das cores — vulgarmente chamada daltonismo — afeta cerca de 8% dos homens e 0,5% das mulheres. Isto corresponde a cerca de 1 em cada 12 homens e 1 em cada 200 mulheres, tornando-a mais prevalente do que a maioria das outras deficiências que os padrões de acessibilidade web abordam.

No entanto, é rotineiramente ignorada no design. As equipas testam com leitores de ecrã e navegação por teclado, executam uma análise WCAG automatizada e consideram o trabalho de acessibilidade concluído — sem nunca verificar se a sua paleta de cores é legível para utilizadores daltónicos.

Compreender o daltonismo, e o que ele realmente faz às interfaces web que concebe, é o primeiro passo para o corrigir.

Os tipos e o que fazem

A deficiência da visão das cores apresenta-se sob várias formas, e nem todas produzem a mesma experiência.

Deficiências vermelho-verde (mais comuns)

Protanopia — ausência completa dos fotorrecetores dos cones vermelhos. O vermelho aparece escuro ou preto. As distinções vermelho-verde perdem-se.

Protanomalia — sensibilidade reduzida ao vermelho. O vermelho, o laranja e o amarelo deslocam-se para o verde, e a experiência geral é mais baça, como se o canal vermelho tivesse sido reduzido.

Deuteranopia — ausência completa dos recetores dos cones verdes. A forma mais comum de daltonismo. O verde e o vermelho são confundidos; o mundo parece filtrado através de uma lente amarelo-acastanhada.

Deuteranomalia — sensibilidade reduzida ao verde. Semelhante à deuteranopia, mas mais ligeira. O tipo mais prevalente no geral, afetando cerca de 5% dos homens.

Deficiências azul-amarelo (mais raras)

Tritanopia — ausência dos recetores dos cones azuis. O azul aparece verde e o amarelo aparece pálido ou invisível. Raro.

Tritanomalia — sensibilidade reduzida ao azul. O azul-verde e o vermelho-púrpura são confundidos.

Monocromacia (muito rara)

Achromatopsia — ausência de todos os recetores dos cones de cor. Apenas o brilho é percecionado; o mundo aparece em tons de cinzento. Frequentemente acompanhada de sensibilidade à luz e acuidade visual reduzida.

Como o daltonismo quebra padrões web comuns

Conhecer os tipos de forma abstrata é menos útil do que saber que decisões de design específicas causam problemas. Estas são as mais comuns.

Estados de erro indicados apenas por vermelho

Tornar vermelho o contorno de um campo de formulário para mostrar um erro de validação é um dos padrões mais generalizados no design web. Para utilizadores com deficiência vermelho-verde, o vermelho sobre branco ou o vermelho sobre cinzento pode ser quase invisível, ou indistinguível de um estado normal sem foco.

Isto é abordado diretamente pela norma WCAG 2.2 1.4.1 Utilização de Cor (Nível A): a cor não deve ser o único meio de transmitir informação, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual.

A solução é direta: combine a cor com um segundo indicador visual — um ícone, uma etiqueta de texto, uma mudança na espessura do contorno ou qualquer outro sinal que não seja de cor.

<!-- A depender apenas da cor: falha 1.4.1 -->
<input type="email" class="field--error">

<!-- Cor mais ícone mais texto: passa -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Introduza um endereço de e-mail válido.
  </p>
</div>

Contraste insuficiente

O baixo contraste é uma questão separada do daltonismo, mas ambos se cruzam. Muitas paletas de cores que parecem legíveis para a visão de cores típica tornam-se ainda mais difíceis de ler sob uma deficiência da visão das cores, porque a diferença percecionada entre o primeiro plano e o fundo diminui ainda mais.

A norma WCAG 1.4.3 exige um rácio de contraste mínimo de 4,5:1 para texto normal e 3:1 para texto grande. Testar o contraste com uma ferramenta como o seletor de cores das DevTools do navegador ou um verificador dedicado é inegociável — não confie na inspeção visual.

Visualização de dados que codifica apenas na cor

Um gráfico circular com seis segmentos diferenciados apenas pela cor. Um mapa com um gradiente de vermelho para verde. Um gráfico de linhas em que quatro conjuntos de dados se distinguem apenas pelo matiz.

Para utilizadores com deuteranopia, o vermelho e o verde tornam-se indistinguíveis. O significado do gráfico colapsa por completo. Para saber mais sobre isto, consulte o nosso guia sobre visualização de dados acessível.

Ligações que dependem apenas da cor para se destacarem do corpo do texto

Por predefinição, os navegadores sublinham as ligações. Muitos designers removem este sublinhado e dependem apenas da cor para distinguir as ligações do texto circundante. Os utilizadores com deficiência da visão das cores — e especialmente os que utilizam temas de baixo contraste — podem não conseguir identificar as ligações de todo.

A norma WCAG 1.4.1 também se aplica aqui. Se a cor da ligação for o único indicador visual (sem sublinhado, sem negrito, sem outro fator de diferenciação), a ligação não é acessível para utilizadores daltónicos.

A solução mais simples: restaurar o sublinhado. Em alternativa, garanta que a cor da ligação tem contraste suficiente tanto em relação à cor do corpo do texto como ao fundo.

Conceber tendo o daltonismo em mente

Utilize codificação redundante

Adicione um segundo canal visual ao lado da cor. Em gráficos: adicione padrões, texturas ou etiquetas de dados. Em indicadores de estado: adicione ícones. Em estados de formulário: adicione texto. O objetivo é que alguém que remova completamente a cor do design ainda possa compreender tudo.

Teste com ferramentas de simulação

As Chrome DevTools têm uma simulação de daltonismo incorporada. Abra as DevTools > painel Rendering > “Emulate vision deficiencies”. Pode simular protanopia, deuteranopia, tritanopia e achromatopsia.

O Figma e outras ferramentas de design têm plugins semelhantes. Executar uma simulação leva segundos e revela frequentemente problemas que não eram visíveis na pré-visualização padrão.

Verifique a sua paleta como um todo

Não teste apenas pares de elementos individuais. Observe a paleta completa em conjunto: cores primárias, secundárias, de erro, de sucesso, de aviso e informativas. Sob simulação de deuteranopia, o vermelho de erro e o verde de sucesso parecem semelhantes? Se assim for, tem um problema, independentemente de os seus rácios de contraste passarem tecnicamente.

Evite combinações problemáticas

Particularmente pouco fiáveis para a deficiência da visão das cores:

• Vermelho e verde
• Verde e castanho
• Azul e púrpura
• Verde e cinzento
• Verde e preto

Quando estes pares tiverem de aparecer no mesmo contexto, diferencie-os através da luminosidade ou do padrão, em vez do matiz.

O que a WCAG cobre e não cobre

A WCAG cobre o contraste de cor (1.4.3, 1.4.11) e a proibição de utilizar a cor como único meio de transmitir informação (1.4.1). Não especifica que cores pode ou não pode utilizar, nem exige que toda a sua paleta seja percetível sob todos os tipos de deficiência da visão das cores.

O que exige é que nenhum significado se perca quando a cor é removida. Esse é o teste prático. Remova a cor do seu design. Cada elemento de informação permanece acessível através de outros meios?

Se a resposta for sim, cumpriu o requisito. Se os estados de erro desaparecem, se os dados dos gráficos se tornam ambíguos, se as ligações se tornam invisíveis — tem trabalho a fazer.

As nossas auditorias de acessibilidade incluem a acessibilidade de cor como parte padrão da avaliação. Se quiser saber em que ponto está o seu design atual, faça uma análise automatizada gratuita para detetar os problemas automatizáveis como ponto de partida.