Guia de paletas acessíveis para daltônicos — regras práticas para designers e desenvolvedores

Comparamos as paletas Okabe-Ito e Paul Tol com simulações protan, deutan e tritan e reunimos regras de design que não dependem da cor, como contraste de luminosidade, codificação dupla e critérios da WCAG.

Se cerca de 1 em cada 12 homens (de ascendência europeia) tem deficiência vermelho-verde, entre as pessoas que olham seus gráficos, mapas e dashboards sempre haverá daltônicos. A boa notícia é que poucas regras resolvem a maior parte dos problemas.

Regra 1 — Não transmita informação só pela cor

O critério de sucesso 1.4.1 “Uso de cores” da WCAG, a diretriz de acessibilidade na web, determina que a cor não seja o único meio visual de transmitir informação. Campos com erro levam borda vermelha e também ícone e texto; linhas de gráficos levam cor e também forma, tracejado e rótulo direto.

Regra 2 — Garanta diferença de luminosidade

Mesmo com daltonismo, diferenças de brilho são bem percebidas. Escolha as cores que precisam ser distinguidas com luminosidade (brilho) claramente diferente. Ver se elas se distinguem numa impressão em preto e branco é o teste mais fácil.

Regra 3 — Evite pares vermelho-verde e use azul-laranja

“Bom = verde, ruim = vermelho” é o erro mais comum. Tanto para protan quanto para deutan, as duas cores viram um ocre parecido. Se precisar contrastar duas categorias, azul ↔ laranja é o mais seguro.

Paletas testadas

A paleta de “design universal de cores” proposta por Okabe e Ito tem 8 cores escolhidas para continuarem distinguíveis mesmo com deficiência vermelho-verde. A tabela abaixo mostra as mesmas cores convertidas por simulação de dicromacia (Machado 2009, intensidade 100%).

Paleta Okabe–Ito (8 cores) — cada linha simula a mesma cor em cada tipo
Visão normal	`#000000`	`#E69F00`	`#56B4E9`	`#009E73`	`#F0E442`	`#0072B2`	`#D55E00`	`#CC79A7`
Dicromacia protan	`#000000`	`#B9A200`	`#9BB3EC`	`#9A9271`	`#F8DC23`	`#5375B5`	`#817100`	`#808BA9`
Dicromacia deutan	`#000000`	`#CAB411`	`#87A4E8`	`#8A8676`	`#FCE34E`	`#3B67B1`	`#9E8C00`	`#9498A5`
Dicromacia tritan	`#000000`	`#FB8C87`	`#00C2C6`	`#009E92`	`#FFD4C5`	`#008289`	`#EB4050`	`#D6788A`

A paleta “bright” de Paul Tol também foi montada pensando no daltonismo e na impressão em preto e branco.

Paleta Paul Tol bright (7 cores)
Visão normal	`#4477AA`	`#EE6677`	`#228833`	`#CCBB44`	`#66CCEE`	`#AA3377`	`#BBBBBB`
Dicromacia protan	`#6179AC`	`#848177`	`#8A7B2A`	`#CCB634`	`#B8C8F0`	`#445579`	`#BBBBBB`
Dicromacia deutan	`#546FA9`	`#A79D74`	`#7E733A`	`#D1BD4B`	`#A4B9EE`	`#666A74`	`#BBBBBB`
Dicromacia tritan	`#008389`	`#FF526D`	`#008576`	`#DBAEA3`	`#00D7D7`	`#B62D50`	`#BBBBBB`

Já a combinação comum de vermelho, verde e laranja saturados se sobrepõe para protan e deutan.

Exemplo a evitar — combinação centrada em vermelho e verde saturados
Visão normal	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
Dicromacia protan	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
Dicromacia deutan	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
Dicromacia tritan	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

Para valores contínuos, luminosidade que varia de forma uniforme

Para valores contínuos, como temperatura ou densidade, use escalas sequenciais em que a luminosidade muda de modo uniforme numa só direção (viridis, cividis etc.). A cividis foi projetada levando o daltonismo em conta.
A escala arco-íris (jet) tem luminosidade irregular, o que confunde até quem não tem daltonismo, e a informação some na faixa vermelho-verde.
Para valores que divergem em dois sentidos (aumento e queda), escalas divergentes azul-branco-laranja (ou vermelho) são mais seguras que as vermelho-verde.

Texto e contraste

Para o texto em relação ao fundo, recomenda-se contraste de luminosidade de pelo menos 4,5:1, pelo critério 1.4.3 da WCAG. Texto vermelho em fundo preto perde muito contraste para quem é protan.
Não mude só a cor dos links; mantenha o sublinhado.

Ordem de verificação

1. Dá para distinguir em preto e branco (escala de cinza)?
2. Dá para distinguir no simulador com protan e deutan a 100%?
3. Além da cor, há pistas de forma, rótulo ou padrão?
4. Dá para pôr rótulos diretamente no gráfico, sem legenda?

Passando nessas quatro verificações, o material fica mais fácil de ler não só para quem tem daltonismo, mas também para quem o vê numa tela apagada, numa impressão em preto e branco ou ao ar livre sob sol forte.

Ver no simulador →