Pular para o conteúdo
nearnull

Simulador de Daltonismo

Veja como uma paleta de cores aparece com protanopia, deuteranopia, tritanopia e acromatopsia, e encontre as cores que ficam difíceis de distinguir. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.

Uma cor por linha, em qualquer formato. Até 12 cores.

Simulação
Visão normal As cores como foram informadas
Protanopia Sem cones vermelhos. Cerca de 1 em cada 100 homens.
Deuteranopia Sem cones verdes. Cerca de 1 em cada 100 homens; as formas leves afetam uns 5 em cada 100.
Tritanopia Sem cones azuis. Rara, bem abaixo de 1 em cada 10.000 pessoas.
Acromatopsia Sem visão de cores, apenas brilho. Cerca de 1 em cada 30.000 pessoas.
Difíceis de distinguir
#2ca02c / #ff7f0e Protanopia · ΔE 4.6
#1f77b4 / #9467bd Protanopia · ΔE 5.7
#d62728 / #2ca02c Deuteranopia · ΔE 7.3
#1f77b4 / #9467bd Deuteranopia · ΔE 8.0
#d62728 / #1f77b4 Acromatopsia · ΔE 1.1
#d62728 / #9467bd Acromatopsia · ΔE 4.6
#2ca02c / #1f77b4 Acromatopsia · ΔE 9.9
#2ca02c / #ff7f0e Acromatopsia · ΔE 9.0
#2ca02c / #9467bd Acromatopsia · ΔE 6.4
#1f77b4 / #9467bd Acromatopsia · ΔE 3.5

O que é um simulador de daltonismo?

Cerca de 8% dos homens e 0.5% das mulheres têm algum tipo de deficiência na visão de cores, quase sempre uma capacidade menor de distinguir vermelho de verde. Um simulador mostra como essas pessoas veem um conjunto de cores, para que você possa conferir se a legenda de um gráfico, um badge de status ou um mapa continuam funcionando. Esta ferramenta transforma cada cor com o modelo de Machado, Oliveira e Fernandes (2009) para protanopia, deuteranopia e tritanopia, converte para escala de cinza na acromatopsia, e sinaliza os pares de cores cuja diferença fica abaixo de um ΔE de 10, o ponto em que ficam difíceis de distinguir.

Exemplos

A mesma simulação em código, como filtro SVG reutilizável e dentro do navegador:

JavaScript
// Machado et al. 2009, deuteranopia, on linear RGB
const M = [[0.367322, 0.860646, -0.227968],
           [0.280085, 0.672501,  0.047413],
           [-0.01182, 0.04294,   0.968881]];
const sim = M.map((row) => row[0] * r + row[1] * g + row[2] * b);
Python
import numpy as np

M = np.array([[0.367322, 0.860646, -0.227968],
              [0.280085, 0.672501, 0.047413],
              [-0.01182, 0.04294, 0.968881]])
simulated = linear_rgb @ M.T
SVG filter
<filter id="deuteranopia">
  <feColorMatrix type="matrix" values="0.367 0.861 -0.228 0 0
    0.280 0.673 0.047 0 0  -0.012 0.043 0.969 0 0  0 0 0 1 0" />
</filter>
CSS
/* preview a whole page through the SVG filter above */
html { filter: url(#deuteranopia); }

Casos de uso

Verificar paletas de gráficos e mapas

Garanta que cada série de um gráfico ou categoria de um mapa continue distinguível, principalmente os pares de vermelho e verde, que são os que mais falham.

Cores de status em interfaces

Estados de sucesso, aviso e erro muitas vezes dependem só de verde, amarelo e vermelho. Veja se eles se confundem e adicione ícones ou rótulos onde acontecer.

Revisar uma paleta de marca

Teste um conjunto de cores de marca antes de usá-lo em todo um produto, assim os problemas de acessibilidade são detectados uma vez e não em cada tela.

Explicar acessibilidade para um time

Mostre a designers e stakeholders como um usuário daltônico realmente vê uma paleta, o que convence mais que uma diretriz.

Perguntas frequentes

Quão precisa é a simulação?
Ela usa o modelo de Machado 2009 com severidade total, muito usado em pesquisa e nas ferramentas de desenvolvedor dos navegadores. A visão de cores real varia de pessoa para pessoa, e as formas leves (protanomalia, deuteranomalia) são bem mais comuns que as completas, então trate o resultado como o pior caso.
O que significa o valor ΔE?
ΔE é a distância entre duas cores no espaço de cor CIE Lab, que acompanha aproximadamente a percepção humana. Abaixo de cerca de 10, duas cores são fáceis de confundir quando são pequenas ou não estão lado a lado, então os pares abaixo desse limite são listados.
Por que aparecem pares que parecem diferentes na acromatopsia?
Sem visão de cores resta apenas o brilho, e muitas paletas usam cores de luminosidade parecida. Se essas cores carregam significado, adicione uma segunda pista, como um padrão, um ícone ou um rótulo de texto.
Como corrijo uma paleta que falha?
Varie a luminosidade além do matiz, prefira azul e laranja em vez de vermelho e verde para pares que precisam contrastar, e nunca use a cor como única forma de transmitir informação. Paletas como a Okabe-Ito foram criadas para isso.
Meus dados são enviados a algum servidor?
Não. Cada simulação roda no seu navegador com JavaScript puro. Nada do que você informa é transmitido ou armazenado.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Gradiente CSSGerador de Paleta de Cores (Harmonias)Seletor de Cor de Imagem