Como criar uma paleta de cores segura para daltônicos

Cerca de 1 em cada 12 homens tem algum tipo de deficiência de visão de cores. As orientações de design costumam parar em “não use vermelho e verde juntos”, o que é vago demais para ser aplicado e nem chega a ser a regra de verdade.

A regra de verdade

Não é que vermelho e verde fiquem idênticos. Uma pessoa com deuteranopia normalmente ainda distingue um vermelho de um verde, porque os dois costumam diferir em luminosidade, além do matiz.

O que se confunde é um par que difere apenas no eixo vermelho-verde, com luminosidade parecida. Essa é a falha específica, e é por isso que o conselho vago deixa escapar tantos casos reais, inclusive pares que não têm vermelho nem verde.

Azul e roxo é o exemplo mais gritante. Para a visão típica, eles parecem claramente diferentes, a uma distância perceptual de cerca de 15. Com deuteranopia, ela cai para menos de 1. Os dois viram a mesma cor, e ninguém avisa você sobre azul e roxo.

As duas propriedades que resistem

Luminosidade. Não é afetada por nenhuma deficiência vermelho-verde. Duas cores com um degrau claro de luminosidade entre elas continuam distinguíveis, não importa o que os cones estejam fazendo. É a ferramenta mais confiável que você tem.

O eixo azul-amarelo. Fica praticamente intacto na protanopia e na deuteranopia, que juntas respondem pela grande maioria dos casos. Azul contra laranja é a combinação de duas cores mais robusta que existe: nas medições, muitas vezes as duas ficam mais separadas com deuteranopia do que na visão típica.

As deficiências do tipo tritan afetam o eixo azul-amarelo, mas são raras o bastante (cerca de 0.01%) para que azul-laranja continue sendo o padrão certo.

Montando uma paleta categórica

Duas categorias. Azul e laranja. É quase um problema resolvido; use e siga em frente.

Três. Azul, laranja e uma terceira cor separada principalmente pela luminosidade, um neutro muito escuro ou muito claro. Não recorra ao verde como terceira cor.

Quatro. Azul, laranja, mais um neutro claro e um escuro. Você está perto do limite prático do que a cor sozinha consegue carregar.

Cinco ou mais. A cor deixou de ser uma codificação confiável. Você precisa de um segundo canal: forma, padrão, rótulos diretos, posição. Isso não é uma concessão; rótulos diretos são melhores do que uma legenda de cores para qualquer leitor, não só para os daltônicos.

Se você quer um conjunto pronto, a paleta Okabe-Ito tem oito cores pensadas exatamente para isso e é muito usada em publicações científicas. Os esquemas qualitativos de Paul Tol são outra opção bem testada.

As cores de status merecem atenção especial

Vermelho para erro e verde para sucesso é a falha de daltonismo mais comum em software, porque é uma convenção que ninguém audita.

Medidas, as cores padrão danger e success do Bootstrap ficam a uma distância perceptual de cerca de 74 na visão típica e de 4 com deuteranopia. O red-500 e o green-500 do Tailwind vão de 76 para cerca de 8. Cada cor dos dois pares passa no contraste sozinha contra o branco, então nenhuma auditoria de contraste aponta o problema.

Três soluções, da menos para a mais durável:

1. Afaste as duas na luminosidade. Um vermelho escuro e um verde claro continuam distinguíveis. É a mudança mais barata.
2. Saia do eixo vermelho-verde. Azul para sucesso é incomum, mas perfeitamente legível.
3. Adicione um ícone. Um X e um visto, ou um triângulo de alerta. É esta solução que de fato atende ao WCAG 1.4.1, e é a que continua funcionando quando a paleta for redesenhada.

O que o WCAG exige

O Critério de Sucesso 1.4.1, Use of Colour (uso de cores), é de nível A, o patamar básico. Ele exige que a cor nunca seja o único meio visual de transmitir uma informação, indicar uma ação, pedir uma resposta ou distinguir um elemento.

Repare no que ele não diz. Ele não proíbe pares de vermelho e verde e não exige nenhuma paleta em particular. Ele exige redundância: alguma outra pista que carregue a mesma informação.

Esse enquadramento é útil porque aponta para a solução durável. Uma paleta segura é uma boa prática. Uma segunda pista é o requisito, e ela sobrevive quando outra pessoa redesenhar as suas cores mais tarde.

Verificando o seu próprio trabalho

A simulação mostra o que provavelmente se perde, não o que uma pessoa específica enxerga, e os modelos são aproximações. Use-a para encontrar problemas, e não para atestar que eles não existem.

A pergunta que vale fazer é sobre pares, não sobre cada cor: quais duas cores desta paleta deixam de ser distinguíveis? O nosso simulador de daltonismo testa cada par contra oito tipos de visão e aponta os que se confundem, que é a verificação que uma ferramenta de contraste, pela própria estrutura, não consegue fazer.