Daltonismo e design inclusivo: como adaptar cores

Por Felipe Silva · Atualizado em 25/09/2026

Para adaptar cores a pessoas com daltonismo, a regra central é simples: nunca use a cor como o único meio de transmitir uma informação. Combine cor com texto, ícones, padrões ou posição, garanta diferença de luminosidade entre elementos que precisam ser distinguidos e evite depender de pares como vermelho e verde. Com isso, a interface continua clara para quem enxerga todas as cores e para quem não enxerga.

Este guia explica os tipos de daltonismo, as combinações que mais causam confusão, as técnicas que funcionam em interfaces, gráficos e mapas e como testar o resultado antes de publicar.

O que é daltonismo e quantas pessoas afeta

A retina tem três tipos de cone, sensíveis a comprimentos de onda longos (L, associados ao vermelho), médios (M, ao verde) e curtos (S, ao azul). O daltonismo, ou deficiência de visão de cores, acontece quando um desses tipos falta ou funciona com a sensibilidade deslocada. Na maioria dos casos é hereditário e ligado ao cromossomo X, por isso é bem mais comum em homens.

Os números consolidados: cerca de 8% dos homens e 0,5% das mulheres de ascendência europeia têm alguma deficiência vermelho-verde. A forma mais comum é a deuteranomalia. As deficiências azul-amarelo e a acromatopsia são raras. Na prática, um produto com milhares de usuários quase certamente atende pessoas daltônicas todos os dias.

Um ponto importante: daltonismo raramente significa enxergar em preto e branco. A maioria das pessoas vê cores, mas confunde determinados pares.

Tipos de daltonismo

Os sufixos indicam a gravidade: -anopia quando o tipo de cone está ausente e -anomalia quando ele existe, mas com sensibilidade alterada (forma mais leve e mais frequente).

Combinações de cores problemáticas

Estes são os pares que mais causam problemas em interfaces e gráficos, sobretudo quando têm luminosidade parecida:

• Vermelho e verde: o caso clássico. vermelho e verde em indicadores de “erro” e “ok” podem ficar quase iguais para protan e deutan.
• Verde e marrom: #008000 e marrom #8B4513 se confundem com facilidade, comum em mapas de relevo e temas “naturais”.
• Azul e roxo: o roxo é azul com um componente vermelho; se o vermelho é mal percebido, sobra azul. azul e roxo viram quase a mesma cor.
• Verde e cinza: verdes pouco saturados se aproximam do cinza, um problema quando “ativo” é verde e “inativo” é cinza.
• Azul-claro e cinza: um azul-celeste ao lado de um cinza-claro pode perder a diferença, sobretudo para tritan e em telas com pouco brilho.

O problema não é usar essas cores, mas usá-las como única diferença entre duas informações.

Não dependa só da cor (WCAG 1.4.1)

O critério de sucesso 1.4.1 Uso de cor da WCAG, de nível A, exige que a cor não seja o único meio visual de transmitir informação, indicar uma ação, pedir uma resposta ou distinguir um elemento. Exemplos de como aplicar:

• Formulários: além da borda vermelha, mostre um ícone e uma mensagem como “Informe um e-mail válido”.
• Estados de sucesso e erro: use ícones de forma diferente (círculo com ✓, triângulo com !) e texto, não só verde e vermelho.
• Links no meio do texto: mantenha o sublinhado ou garanta contraste de 3:1 com o texto ao redor mais um indicador extra no foco e no hover.
• Campos obrigatórios: escreva “obrigatório” ou use um asterisco explicado, em vez de só colorir o rótulo.
• Status em tabelas: “Aprovado”, “Pendente” e “Recusado” como texto, com a cor como reforço.

Exemplo prático: um painel de status

Imagine um painel de servidores em que cada linha tem uma bolinha verde (no ar) ou vermelha (fora do ar). Para boa parte dos usuários daltônicos, as duas bolinhas parecem iguais, e a informação mais importante da tela desaparece. A correção não exige mudar a identidade visual:

1. Troque a bolinha por um ícone com forma própria para cada estado, como ✓ para “no ar” e ✕ para “fora do ar”.
2. Acrescente o texto do estado ao lado do ícone.
3. Ordene ou agrupe as linhas com problema no topo, para que a posição também comunique.
4. Mantenha as cores como reforço, escolhendo tons com luminosidade bem diferente.

Gráficos, dados e mapas

Visualização de dados é onde o daltonismo mais atrapalha, porque legendas coloridas exigem que o leitor compare tons.

Rótulos diretos

Escreva o nome da série junto à linha ou à barra, em vez de obrigar o leitor a ir e voltar da legenda. Isso ajuda todo mundo, não só quem tem daltonismo.

Padrões, texturas e formas

Em barras e áreas, use hachuras, pontilhados ou listras; em linhas, combine traço contínuo, tracejado e pontilhado; em gráficos de dispersão, varie a forma do marcador (círculo, quadrado, triângulo).

Paletas amigáveis

O par azul × laranja é distinguível para os tipos mais comuns de daltonismo e é uma boa troca para o vermelho × verde. Para gráficos com várias categorias, a paleta Okabe-Ito é uma referência consolidada:

Mesmo com uma paleta segura, mais de cinco ou seis categorias num só gráfico ficam difíceis para qualquer leitor. Nesses casos, agrupe dados ou divida em gráficos menores.

Mapas

Em mapas de calor e coropléticos, prefira escalas sequenciais que variam principalmente em luminosidade (do claro ao escuro de um mesmo matiz) ou escalas divergentes azul–laranja. Evite o “arco-íris” e a escala vermelho–amarelo–verde, que tem trechos indistinguíveis para deutan e protan. Em mapas de transporte ou de rotas, some números, nomes ou padrões de linha às cores.

Contraste de luminosidade

Quem tem daltonismo continua percebendo bem a diferença entre claro e escuro. Por isso, a luminosidade é a sua melhor aliada: duas cores com luminosidade bem diferente continuam distinguíveis mesmo se o matiz se perder.

Os números mostram por que o par vermelho e verde falha tanto. O vermelho puro #FF0000 e o verde #008000 têm razão de contraste de apenas 1,28:1 entre si, ou seja, luminosidade quase igual. Quando o matiz deixa de ser percebido, sobra praticamente a mesma mancha. Já o azul #0072B2 e o laranja #E69F00 da paleta Okabe-Ito chegam a 2,3:1, e ainda diferem num eixo de cor (azul–amarelo) que as deficiências vermelho-verde preservam.

Um teste rápido é converter o layout para tons de cinza. Se dois elementos que precisam ser diferentes viram o mesmo cinza, ajuste a luminosidade de um deles. Para texto, siga os mínimos da WCAG (4,5:1 para texto normal, 3:1 para texto grande) e, para componentes de interface e partes de gráficos, 3:1 pelo critério 1.4.11. Meça no verificador de contraste e veja os detalhes no guia de contraste de cores e acessibilidade.

Como testar suas cores

• Simulador de daltonismo: envie uma captura da tela, um gráfico ou uma foto ao simulador de daltonismo e compare a imagem nos diferentes tipos de deficiência.
• DevTools do Chrome e do Edge: abra o painel Rendering (pelo menu de mais ferramentas do DevTools) e use a opção Emulate vision deficiencies, que simula protanopia, deuteranopia, tritanopia e acromatopsia na página inteira, além de visão embaçada.
• Firefox: o Inspetor de Acessibilidade do DevTools também oferece simulação de deficiências de visão de cores.
• Pessoas reais: simulações são aproximações. Sempre que possível, peça feedback a usuários daltônicos.

Faça esses testes cedo, na fase de paleta e protótipo, quando trocar uma cor ainda é barato. O gerador de paletas ajuda a explorar alternativas antes de fechar o sistema de cores.

Checklist de design inclusivo para daltonismo

1. Nenhuma informação depende só da cor: há texto, ícone, padrão ou posição de apoio.
2. Erro, alerta e sucesso têm ícones de formas diferentes e mensagens escritas.
3. Links no texto têm sublinhado ou outro indicador além da cor.
4. Gráficos usam rótulos diretos e, se preciso, padrões ou formas de marcador.
5. A paleta de dados evita vermelho × verde e usa pares como azul × laranja ou a Okabe-Ito.
6. Mapas usam escalas sequenciais de luminosidade ou divergentes seguras, sem arco-íris.
7. Os elementos continuam distinguíveis em tons de cinza.
8. O contraste atende a WCAG: 4,5:1 para texto, 3:1 para texto grande e componentes.
9. O layout foi conferido no simulador e na emulação do DevTools.

Para continuar, teste suas telas no simulador de daltonismo, meça os pares no verificador de contraste e monte uma nova base no gerador de paletas. O guia sobre como escolher a paleta de cores de um site mostra como aplicar tudo isso num sistema de cores completo.