TOOLADEX
light
← Back to Blog

Simulador de Daltonismo: Veja Seus Designs Como 300 Milhões de Pessoas os Veem

By Tooladex Team •
Color BlindnessAccessibilityDesign ToolsWCAGColor VisionUI DesignWeb Design
Comparação lado a lado de uma interface colorida e sua versão simulada com daltonismo

Estima-se que 300 milhões de pessoas em todo o mundo tenham alguma forma de daltonismo — cerca de 1 em cada 12 homens e 1 em cada 200 mulheres. Esse é um grupo maior do que a população da maioria dos países, e se o seu produto depende da cor para comunicar status, direção ou significado, uma parcela significativa dos seus usuários está vendo algo diferente do que você projetou.

O Simulador de Daltonismo da Tooladex permite enviar qualquer imagem — uma captura de tela, um gráfico, um protótipo — e vê-la como alguém com protanopia, deuteranopia, tritanopia ou outra deficiência de visão de cores a veria. Tudo acontece localmente no seu navegador; nada é enviado para um servidor.

O que é daltonismo?

A visão de cores começa com três tipos de cones na retina, cada um sintonizado em uma faixa de comprimentos de onda que corresponde aproximadamente à luz vermelha, verde e azul. Seu cérebro combina esses sinais para produzir o espectro de cores completo que você percebe.

O daltonismo acontece quando um desses tipos de cones está totalmente ausente (dicromacia) ou deslocado, respondendo aos comprimentos de onda errados (tricromacia anômala). O resultado geralmente não é enxergar em preto e branco — é que certas cores que parecem claramente diferentes para a visão típica se tornam difíceis, ou impossíveis, de distinguir.

A maioria dos casos de daltonismo é hereditária e ligada ao cromossomo X, por isso é muito mais comum em homens (que têm apenas um cromossomo X) do que em mulheres (que têm dois, e precisariam que ambas as cópias fossem afetadas).

Tipos de daltonismo que esta ferramenta simula

  • Protanopia (cegueira ao vermelho) — sem cones vermelhos. ~1% dos homens.
  • Protanomalia (deficiência ao vermelho) — cones vermelhos deslocados. ~1% dos homens.
  • Deuteranopia (cegueira ao verde) — sem cones verdes. ~1% dos homens.
  • Deuteranomalia (deficiência ao verde) — cones verdes deslocados. ~5% dos homens — a forma mais comum.
  • Tritanopia (cegueira ao azul) — sem cones azuis. ~1 em cada 10.000 pessoas.
  • Tritanomalia (deficiência ao azul) — cones azuis deslocados. Extremamente raro.
  • Acromatopsia (monocromacia) — nenhum cone funcional. ~1 em cada 30.000 pessoas.
  • Acromatomalia (monocromacia parcial) — cones severamente reduzidos. Extremamente raro.

As deficiências vermelho-verde (protanopia, protanomalia, deuteranopia e especialmente deuteranomalia) representam a grande maioria dos casos de daltonismo. Se você só puder projetar e testar para um caso, que seja esse.

Como usar o simulador

  1. Envie uma imagem — uma captura de tela, um gráfico, um logotipo ou um protótipo de interface — ou comece com a imagem de demonstração incluída, deliberadamente cheia das armadilhas clássicas de acessibilidade (um par de status vermelho/verde, um semáforo, um degradê arco-íris).
  2. Escolha um tipo de visão no seletor, ou percorra a grade comparativa para ver todos os tipos ao mesmo tempo.
  3. Compare original vs. simulado — a ferramenta transforma os valores de vermelho, verde e azul de cada pixel usando matrizes de cor que aproximam como esse tipo de visão os percebe.
  4. Teste cores individuais — escolha qualquer valor hexadecimal e veja instantaneamente como ele aparece em cada tipo de visão, útil para verificar uma paleta antes de finalizá-la.
  5. Baixe o resultado para incluir em uma revisão de design, uma apresentação para o cliente ou uma auditoria de acessibilidade.

Design sem depender apenas da cor

O erro de acessibilidade mais comum no design de interfaces é usar a cor como o único sinal para algo importante. Uma borda vermelha significa "erro". Um ponto verde significa "online". Uma linha vermelha versus uma verde em um gráfico significa "caindo" versus "subindo". Para alguém com deuteranomalia, esses pares podem parecer quase idênticos.

Algumas soluções práticas:

  • Combine a cor com uma forma ou ícone. Uma marca de verificação e um "x" comunicam sucesso/erro mesmo que as cores pareçam iguais.
  • Use rótulos de texto, não apenas pontos codificados por cor. "Ativo" / "Inativo" é melhor do que um ponto verde / ponto cinza.
  • Adicione padrões ou texturas aos gráficos, não apenas tons diferentes, para séries de dados que precisam permanecer distinguíveis.
  • Teste sua paleta primeiro contra a deuteranomalia — já que é de longe a deficiência mais comum, corrigi-la cobre a maior parte dos usuários reais.
  • Verifique a luminosidade, não apenas o tom. Duas cores podem ter tons muito diferentes, mas um brilho percebido quase idêntico, o que as faz se confundir ainda mais sob o daltonismo.

Combinações de cores mais seguras para status e gráficos

  • Vermelho / Verde → Azul / Laranja
  • Pontos de status vermelho / verde → Ícone + rótulo (✓ Sucesso / ✕ Erro)
  • Gráfico de linha vermelho / verde → Estilos de linha sólida / tracejada, mais uma legenda
  • Mapa de calor "bom" verde / "ruim" vermelho → Escala divergente azul-laranja

Ferramentas relacionadas