Paleta para daltônicos e como testar seus designs

Uma paleta amiga de daltônicos é um conjunto de cores que continuam distintas para quem confunde certos matizes, em geral vermelhos e verdes. O truque é separar as cores por luminosidade e por matiz e nunca deixar a cor ser o único sinal. Um azul escuro e um laranja claro continuam diferentes para quase todo mundo; um vermelho médio e um verde médio, com luminosidade parecida, podem parecer o mesmo marrom turvo. Abaixo estão paletas que você pode copiar, os pares a evitar e três formas gratuitas de testar seu trabalho.

Os tipos de daltonismo, em resumo

A visão de cores depende de três tipos de cone no olho, sintonizados grosso modo para comprimentos de onda longos, médios e curtos. Quando um tipo falta ou está deslocado, algumas cores que parecem diferentes para a maioria passam a parecer iguais. O artigo da WebAIM sobre daltonismo trata da biologia; para o design, o que importa é esta tabela.

O fio comum: o matiz deixa de ser confiável, mas a luminosidade se mantém. Uma pessoa com deuteranopia ainda vê com clareza que uma cor é mais escura que outra. Esse único fato move todas as regras abaixo.

Uma paleta amiga de daltônicos que você pode copiar

O conjunto seguro mais conhecido é a paleta proposta por Masataka Okabe e Kei Ito para figuras científicas. Suas oito cores foram escolhidas para continuar distinguíveis nos tipos comuns de daltonismo, e funcionam igualmente bem em gráficos, mapas, rótulos e cores de status em um produto.

Para trabalho de marca, oito cores costumam ser demais. O par único mais seguro é azul e laranja: ficam em lados opostos da linha de confusão entre vermelho e verde e diferem em luminosidade, então se leem como diferentes para quase todos. Azul com amarelo e roxo escuro com verde claro também funcionam bem.

Gradientes e escalas para dados

Para mapas de calor e gráficos que mostram uma faixa, use uma escala cuja luminosidade mude de modo constante de uma ponta à outra. Uma escala do vermelho ao verde falha duas vezes: as pontas se confundem para leitores daltônicos e as duas têm luminosidade parecida. Do azul ao laranja, ou um só matiz do escuro ao claro, funciona para quase todos.

Pares a evitar e o que usar no lugar

Algumas combinações dão problema o tempo todo. O vermelho #d7263d e o verde #2e9e44 acima parecem claramente diferentes para a maioria, mas a luminosidade perceptiva deles é quase idêntica (em torno de 57% e 62% em OKLCH), então para quem tem deuteranopia sobra pouco para distingui-los.

Se as cores da sua marca são vermelho e verde, você não precisa mudá-las. Só deixe uma claramente mais escura que a outra e nunca use as duas como única diferença entre, por exemplo, um ganho e uma perda. Uma seta ou um sinal de mais e de menos resolve para todos. Escolher as cores desde o início é tema de como escolher as cores da marca.

Nunca dependa só da cor

Esta é a regra que mais importa, e também faz parte das Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Se a legenda de um gráfico, o erro de um formulário, um selo de "em estoque" ou um mapa só diferem pela cor, alguns leitores perdem o significado. Acrescente um segundo sinal:

• Rótulos direto nas linhas e barras do gráfico, em vez de uma chave de cores.
• Ícones para estados: um visto para sucesso, um X ou sinal de alerta para erros.
• Padrões ou estilos de linha, como linhas tracejadas e contínuas, em gráficos.
• Posição e ordem, para o primeiro item significar sempre a mesma coisa.
• Contraste de texto que passe por si só, conferido com um verificador de contraste.

Gráficos para redes sociais pedem o mesmo cuidado. Um post que diz "verde significa disponível" sobre um calendário vermelho e verde perde alguns leitores. As palavras carregam melhor, e elas próprias precisam ser legíveis sobre o fundo, sobretudo em gradientes, onde o contraste muda pelo quadro. Texto sobre gradientes trata disso em detalhe.

Essa versão da direita é o que um Mark do Gradiently faz sozinho: leva sua região mais calma e de melhor contraste para trás do texto, e a Tinta automática escolhe tinta clara ou escura em cada linha, então a separação vem da luminosidade, não do matiz.

Como testar um design para daltonismo

1. 1

   Faça a checagem em escala de cinza

   Exporte ou tire um print do design e passe para escala de cinza. Se duas cores com significados diferentes viram o mesmo cinza, mude a luminosidade de uma.

2. 2

   Simule no navegador

   No Chrome ou no Edge, abra as ferramentas de desenvolvedor, abra o menu de comandos, digite Rendering e use Emulate vision deficiencies para ver a página ao vivo como protanopia, deuteranopia, tritanopia ou acromatopsia.

3. 3

   Confira a tela inteira em cinza

   Mac e Windows trazem um filtro de cor em escala de cinza nas configurações de acessibilidade. Ative-o para revisar apps, arquivos de design e exportações, não só páginas web.

4. 4

   Tire a cor e leia de novo

   Pergunte se todo gráfico, selo e status ainda faz sentido só com rótulos e ícones. Se faz, a cor é decoração, que é o lugar dela.

Simulações são aproximações, e a visão de cores varia de pessoa para pessoa. Se a acessibilidade importa para o seu produto, peça a pessoas daltônicas que você conhece que olhem o resultado real. Para gráficos em especial, design de infográficos traz mais sobre rotulagem e layout, e harmonia de cores ajuda quando você precisa de uma paleta segura que ainda pareça bem pensada.