Projetar para o daltonismo: guia completo

Cerca de 300 milhões de pessoas no mundo têm alguma forma de deficiência de visão de cores. Se o seu site, app ou visualização de dados depende só da cor para comunicar informação, uma parcela significativa do seu público terá dificuldade para usá-lo.

A boa notícia: projetar para o daltonismo beneficia todo mundo. Escolhas cromáticas acessíveis melhoram clareza, legibilidade e usabilidade para todas as pessoas — tenham elas deficiência de visão de cores ou não.

Por que o design acessível a daltônicos importa

A deficiência de visão de cores atinge cerca de 8% dos homens e 0,5% das mulheres. Na prática, isso significa:

Numa equipe de 20 homens, cerca de 1 a 2 terão a condição
Num público de 1 milhão, cerca de 80.000 homens terão alguma forma de deficiência vermelho-verde
A confusão vermelho-verde é a forma mais comum, respondendo por ~98% dos casos

Projetar para o daltonismo também é cada vez mais uma exigência legal. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1 exigem explicitamente que a informação transmitida por cor esteja disponível também por outros meios.

A regra de ouro: nunca dependa apenas da cor

O princípio mais importante do design amigável a daltônicos é simples:

Nunca use a cor como único meio de transmitir informação.

Sempre combine cor com pelo menos outra pista visual:

Rótulos de texto — nomeie explicitamente a categoria ou o status
Ícones ou símbolos — use formas independentes de cor
Padrões ou texturas — especialmente úteis em gráficos e mapas
Posição — use o arranjo espacial para comunicar hierarquia
Forma — use formas diferentes para categorias diferentes de dados

Evite combinações problemáticas

Certos pares de cores são especialmente difíceis para quem tem daltonismo vermelho-verde:

Combinações de alto risco a evitar

Evite	Porque	Alternativa
Vermelho sobre verde	Completamente invisível para quem tem deuteranopia	Use azul sobre laranja
Verde sobre vermelho	Mesmo problema	Use amarelo sobre azul
Botões vermelho e verde	Não dá para distinguir aprovado/reprovado	Adicione ícones (✓/✗) e texto
Texto vermelho e preto	O vermelho pode parecer cinza-escuro	Use negrito ou sublinhado para ênfase
Rosa e cinza	Parecem idênticos para quem tem protanopia	Use azul e cinza

Combinações mais seguras

Para quem tem deficiência vermelho-verde, azul e laranja é o par acessível mais confiável — esses matizes continuam distintos em praticamente todos os tipos de deficiência.

Outros pares seguros:

Azul + amarelo (excelente tanto para vermelho-verde quanto para azul-amarelo)
Azul + branco
Preto + amarelo (contraste máximo)
Roxo + amarelo

Gráficos acessíveis a pessoas daltônicas

A visualização de dados é onde o daltonismo tem o impacto mais significativo. Erros comuns:

Usar vermelho/verde para valores positivos/negativos
Usar mapas de calor com gradientes vermelho-amarelo-verde
Distinguir várias séries de dados apenas pela cor

Soluções para gráficos

1. Use preenchimentos com padrão junto com as cores Adicione hachuras, pontos ou tramas cruzadas às áreas do gráfico para que continuem distinguíveis mesmo quando as cores parecerem semelhantes.

2. Rotule os dados diretamente Em vez de depender de uma legenda de cores, rotule as séries diretamente no gráfico. Isso ajuda todo mundo, não só quem é daltônico.

3. Use uma paleta acessível Paletas recomendadas:

Paleta Okabe-Ito: pensada especificamente para acessibilidade em figuras científicas
Paletas ColorBrewer: paletas com respaldo em pesquisa para mapas e gráficos
Use nosso simulador de daltonismo para verificar se seus gráficos continuam distintos sob simulação

4. Ofereça formatos alternativos de dados Disponibilize uma visão em tabela ou o download dos dados ao lado de qualquer gráfico, para que quem tem dificuldade com a representação visual acesse a informação subjacente.

Formulários e estados de interface

Formulários são uma área de risco alto porque os indicadores de status costumam depender de cor:

Problemas comuns

Borda vermelha em campos inválidos, borda verde em campos válidos
“Status: Ativo” mostrado apenas em texto verde
Mensagens de erro exibidas apenas em vermelho

Alternativas acessíveis

Estados de validação:

❌ Não faça: borda vermelha = erro, borda verde = sucesso
✅ Faça:     ícone de erro (⚠) + borda vermelha + texto descritivo do erro
             ícone de sucesso (✓) + borda verde + texto "Tudo certo!"

Indicadores de status:

❌ Não faça: • (ponto verde) = Online, • (ponto vermelho) = Offline
✅ Faça:     ✓ Online, ✗ Offline (ou use formas distintas: ●/○)

Botões e chamadas para ação:

❌ Não faça: "Confirmar" verde / "Cancelar" vermelho — parecem idênticos na protanopia
✅ Faça:     rotule os botões com clareza + garanta contraste suficiente + adicione ícones

Requisitos de contraste (WCAG)

Além da escolha das cores, uma razão de contraste suficiente é essencial para a legibilidade. Use nosso verificador de contraste para conferir suas combinações.

Requisito	Razão mínima	Contexto
WCAG AA	4,5:1	Texto normal (abaixo de 18pt)
WCAG AA	3,0:1	Texto grande (18pt+ ou 14pt em negrito)
WCAG AAA	7,0:1	Reforçado — texto normal
WCAG AAA	4,5:1	Reforçado — texto grande

Importante: essas razões são medidas entre a luminância do texto e a do fundo e precisam ser atendidas para todos os perfis de usuário — inclusive sob simulação de deficiência de visão de cores.

Como testar seus designs

Sempre teste seus designs por vários métodos:

1. Use um simulador

Envie capturas de tela para o simulador ColorVision e veja como seus designs aparecem em cada tipo de deficiência. Teste os quatro: protanopia, deuteranopia, tritanopia e acromatopsia.

2. Use as DevTools do navegador

Chrome e Firefox têm simulação embutida:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Verifique as razões de contraste

Passe cada combinação de texto/fundo por um verificador de contraste que também mostre a simulação.

4. Busque retorno real

Se possível, teste com pessoas daltônicas de verdade. Elas costumam encontrar problemas que as simulações não revelam.

Dicas por plataforma

Design web

Use CSS para adicionar atributos aria-label e title a elementos codificados por cor
Não estilize estados :focus apenas com cor
Garanta que estados de erro em formulários incluam ícone + texto, não só mudança de cor

Ciência de dados e pesquisa

Adote a paleta Okabe-Ito como padrão em R, Python (matplotlib) ou em qualquer biblioteca de gráficos
Sempre inclua legenda com rótulos de texto, mesmo que as cores pareçam autoexplicativas

Apps móveis

iOS e Android oferecem simulação nas configurações de acessibilidade
Teste seu app com essas configurações ativadas antes de cada versão importante

Design impresso

Não dependa da metáfora do semáforo vermelho/verde para status
Garanta que infográficos continuem compreensíveis quando fotocopiados em preto e branco

Ferramentas recomendadas

Ferramenta	Finalidade
Simulador ColorVision	Simular como qualquer imagem aparece com deficiência de visão de cores
Verificador de contraste	Checar conformidade WCAG com prévia de simulação
Colour Oracle (app de desktop)	Camada de simulação para todo o sistema
Who Can Use	Simula razões de contraste em diferentes deficiências
Plugin de acessibilidade do Figma	Checagens em tempo real no Figma

Perguntas frequentes

Tornar um design acessível a daltônicos exige remover toda a cor? Não. A cor pode continuar sendo usada amplamente — ela só não pode ser a única forma de transmitir a informação. Adicione pistas secundárias (texto, ícones, padrões) ao lado da cor.

Vermelho-verde é o único tipo para o qual preciso projetar? A deficiência vermelho-verde cobre ~98% dos casos, mas projetar para ela também tende a ajudar quem tem outros tipos. A abordagem mais inclusiva é testar todos os tipos com um simulador.

Pessoas daltônicas usam leitores de tela? Não necessariamente. Deficiência de visão de cores é diferente de cegueira. Essas pessoas costumam ter acuidade visual plena e não usam leitores de tela; o que precisam são pistas visuais independentes de cor, não texto alternativo.

Qual é a melhor ferramenta gratuita para checar acessibilidade cromática? O simulador e o verificador de contraste deste site são totalmente gratuitos. Para Figma, o plugin gratuito “Able” oferece verificação de contraste em tempo real.

Resposta rápida