Paletas para daltónicos e como testar os teus designs

Uma paleta para daltónicos é um conjunto de cores que continuam distintas para quem confunde certos tons, normalmente vermelhos e verdes. O truque é separar as cores pela luminosidade e também pelo tom, e nunca deixar a cor ser o único sinal. Um azul escuro e um laranja claro continuam diferentes para quase toda a gente; um vermelho médio e um verde médio, com luminosidade parecida, podem parecer o mesmo castanho enlameado. Abaixo ficam paletas que podes copiar, os pares a evitar e três formas grátis de testar o teu trabalho.

Tipos de daltonismo, em resumo

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

O fio condutor: o tom deixa de ser fiável, mas a luminosidade mantém-se. Uma pessoa com deuteranopia continua a ver claramente que uma cor é mais escura do que outra. Este único facto está por trás de todas as regras abaixo.

Uma paleta para daltónicos que podes copiar

O conjunto seguro mais conhecido é a paleta proposta por Masataka Okabe e Kei Ito para figuras científicas. As suas oito cores foram escolhidas para continuarem distinguíveis nos tipos comuns de daltonismo, e funciona igualmente bem em gráficos, mapas, etiquetas e cores de estado num 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 na luminosidade, por isso leem-se como diferentes para quase toda a gente. Azul com amarelo, e roxo escuro com verde claro, também aguentam bem.

Gradientes e escalas para dados

Em mapas de calor e gráficos que mostram um intervalo, usa uma escala cuja luminosidade mude de forma constante de uma ponta à outra. Uma escala de vermelho para verde falha duas vezes: as pontas confundem-se para leitores daltónicos e ambas têm luminosidade parecida. Azul para laranja, ou um só tom do escuro ao claro, funciona para quase todos.

Pares a evitar e o que usar em vez deles

Algumas combinações dão problemas vezes sem conta. O vermelho #d7263d e o verde #2e9e44 acima parecem claramente diferentes à maioria das pessoas, mas a sua luminosidade percebida é quase idêntica (cerca de 57% e 62% em OKLCH), por isso, para quem tem deuteranopia, pouco resta para os distinguir.

Se as cores da tua marca são vermelho e verde, não precisas de as mudar. Basta fazer uma claramente mais escura do que a outra e nunca as usar 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. A escolha das cores à partida está em como escolher as cores da marca.

Nunca dependas só da cor

Esta é a regra que mais conta, e faz também parte das Diretrizes de Acessibilidade para o Conteúdo da Web. Se a legenda de um gráfico, o erro de um formulário, um selo de «em stock» ou um mapa só diferem pela cor, alguns leitores perdem o significado. Acrescenta um segundo sinal:

• Etiquetas diretamente nas linhas e barras dos gráficos, em vez de uma chave de cores.
• Ícones para os estados: um visto para sucesso, uma cruz ou um sinal de aviso para erros.
• Padrões ou estilos de linha, como linhas a tracejado e contínuas, nos gráficos.
• Posição e ordem, para o primeiro item significar sempre a mesma coisa.
• Contraste do texto que passe por si só, verificado com um verificador de contraste.

Os gráficos para redes sociais pedem o mesmo cuidado. Uma publicação que diz «verde quer dizer disponível» sobre um calendário vermelho e verde perde alguns leitores. As palavras transmitem melhor, e as próprias palavras têm de se ler contra o fundo, sobretudo em gradientes, onde o contraste muda ao longo do enquadramento. Texto sobre gradientes trata disso em detalhe.

A versão da direita é o que um Mark do Gradiently faz sozinho: leva a sua zona mais calma e de melhor contraste para trás do texto e a Tinta automática escolhe letra clara ou escura para cada linha, por isso a separação vem da luminosidade e não do tom.

Como testar um design para daltonismo

1. 1

   Faz a verificação em cinzentos

   Exporta ou captura o design e passa-o a escala de cinzentos. Se duas cores com significados diferentes ficarem o mesmo cinzento, muda a luminosidade de uma.

2. 2

   Simula no navegador

   No Chrome ou no Edge, abre as ferramentas de programador, o menu de comandos, escreve Rendering e usa Emulate vision deficiencies para ver a página ao vivo como protanopia, deuteranopia, tritanopia ou acromatopsia.

3. 3

   Verifica o ecrã inteiro em cinzentos

   O Mac e o Windows incluem um filtro de cor em escala de cinzentos nas definições de acessibilidade. Liga-o para rever aplicações, ficheiros de design e exportações, e não só páginas web.

4. 4

   Tira a cor e lê outra vez

   Pergunta se todos os gráficos, selos e estados continuam a fazer sentido só com etiquetas e ícones. Se sim, a cor é decoração, que é o lugar dela.

As simulações são aproximações, e a visão das cores varia de pessoa para pessoa. Se a acessibilidade importa para o teu produto, pede a daltónicos que conheças que olhem para o resultado real. Para gráficos em particular, design de infografias fala mais de etiquetas e layout, e harmonia de cores ajuda quando precisas de uma paleta segura que continue a parecer cuidada.