# Paleta para daltônicos e como testar seus designs

[Canonical HTML page](https://gradiently.design/pt-br/guide/color-blindness-design)

A maior parte da daltonia não é ver em cinza. É certos pares de cores se confundindo em uma só. Escolha cores que difiram em luminosidade e você projeta contornando isso.

## The short version

- Uma paleta amiga de daltônicos usa cores que diferem claramente em luminosidade, e não só em matiz, para continuarem distintas quando alguns matizes se parecem.
- A confusão entre vermelho e verde é de longe o tipo mais comum de deficiência de visão de cores; a confusão entre azul e amarelo é bem mais rara, e não ver cor nenhuma é ainda mais raro.
- A paleta de oito cores de Okabe e Ito foi criada para continuar distinguível nos tipos comuns de daltonismo e é de uso livre.
- Nunca deixe a cor carregar o significado sozinha: acrescente também um rótulo, um ícone, um padrão ou uma posição.
- As ferramentas de desenvolvedor do Chrome e do Edge simulam vários tipos de daltonismo em qualquer página, e uma checagem em escala de cinza pega a maioria dos problemas em segundos.

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](https://webaim.org/articles/visual/colorblind) trata da biologia; para o design, o que importa é esta tabela.

| Tipo | Cones afetados | Cores que se confundem | Frequência |
| --- | --- | --- | --- |
| Deuteranomalia e deuteranopia | Verde (médio) | Vermelho com verde, verde com marrom, azul com roxo | A mais comum |
| Protanomalia e protanopia | Vermelho (longo) | Vermelho com verde e preto, vermelhos parecem mais escuros | Comum |
| Tritanomalia e tritanopia | Azul (curto) | Azul com verde, amarelo com rosa ou cinza | Rara |
| Acromatopsia | Todos | Tudo é visto em tons de cinza | Muito rara |

Os tipos vermelho e verde são herdados no cromossomo X, por isso são bem mais comuns em homens do que em mulheres.

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.

- Preto #000000: #000000
- Laranja #e69f00: #e69f00
- Azul-céu #56b4e9: #56b4e9
- Verde azulado #009e73: #009e73
- Amarelo #f0e442: #f0e442
- Azul #0072b2: #0072b2
- Vermelhão #d55e00: #d55e00
- Roxo avermelhado #cc79a7: #cc79a7

A paleta de Okabe e Ito. Use só as cores de que precisar; quatro ou cinco são mais fáceis para todos do que oito.

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.

- Evite: vermelho a verde: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)`
- Seguro: azul a laranja: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)`
- Seguro: roxo escuro a amarelo: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)`

A última escala segue as cores viridis, muito usadas: sua luminosidade sobe de modo uniforme, então sobrevive até à impressão em escala de cinza.

## 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](https://gradiently.design/pt-br/guide/oklch-explained)), então para quem tem deuteranopia sobra pouco para distingui-los.

### Evite lado a lado

- Vermelho e verde de luminosidade parecida
- Verde e marrom
- Azul e roxo
- Verde claro e amarelo
- Rosa e cinza, ou amarelo e cinza claro

### Use no lugar

- Azul e laranja
- Azul escuro e amarelo claro
- Roxo escuro e verde claro
- Um matiz em degraus de luminosidade bem distintos
- Qualquer par mais um rótulo ou ícone

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](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors).

## 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](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

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](https://gradiently.design/pt-br/guide/text-on-gradient) trata disso em detalhe.

Anúncio de workshop com o título sobre uma parte agitada do gradiente, com pouco contraste de luminosidade

Quando o texto e o fundo têm luminosidade parecida, o matiz faz todo o trabalho, e é justamente isso que alguns leitores perdem.

O mesmo anúncio de workshop com uma área mais calma e escura atrás do título, para ler com clareza

Com uma região calma e mais profunda atrás das palavras, o contraste está na luminosidade, que todo leitor enxerga.

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. **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. **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. **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. **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](https://gradiently.design/pt-br/guide/infographic-design) traz mais sobre rotulagem e layout, e [harmonia de cores](https://gradiently.design/pt-br/guide/color-harmony) ajuda quando você precisa de uma paleta segura que ainda pareça bem pensada.

## FAQ

### Quais as melhores cores para daltônicos?

Azul e laranja são o par mais seguro, seguidos de azul e amarelo. Acima de tudo, escolha cores que difiram claramente em luminosidade, para continuarem distintas mesmo quando os matizes se parecem.

### O que é a paleta Okabe Ito?

Um conjunto de oito cores (preto, laranja, azul-céu, verde azulado, amarelo, azul, vermelhão e roxo avermelhado) criado para continuar distinguível nos tipos comuns de daltonismo.

### Quais cores devo evitar juntas?

Vermelho com verde, verde com marrom, azul com roxo e verde claro com amarelo, sobretudo quando têm luminosidade parecida.

### Como ver meu design como um daltônico veria?

Nas ferramentas de desenvolvedor do Chrome ou do Edge, abra o painel Rendering e escolha uma opção em Emulate vision deficiencies. Um print rápido em escala de cinza também revela cores que dependem só do matiz.

### Preciso mudar as cores de marca vermelha e verde?

Não. Deixe uma visivelmente mais escura que a outra e acrescente rótulos ou ícones onde as cores carregam significado.