Como usar: Simulador de Daltonismo
- Arraste uma imagem, clique para escolher uma ou cole um screenshot com Ctrl+V.
- Compare o original com as versões simuladas de cada tipo de deficiência de visão de cores.
- Procure informações que somem, como cores de status vermelho/verde, séries de gráficos e estados de erro.
- Mude para Paleta para testar cores da marca ou de gráficos e receber alertas sobre pares que ficam indistinguíveis.
O que é daltonismo?
A deficiência de visão de cores (CVD) afeta cerca de 1 em cada 12 homens e 1 em cada 200 mulheres de descendência do norte europeu. A maioria das pessoas com CVD enxerga cores, só que dentro de uma faixa mais estreita. Os tipos mais comuns são:
| Tipo | Cones afetados | Efeito |
|---|---|---|
| Deuteranomalia / deuteranopia | Verde (M) | Vermelho e verde são difíceis de diferenciar. É a forma mais comum |
| Protanomalia / protanopia | Vermelho (L) | Os vermelhos parecem mais escuros e se misturam com verdes e marrons |
| Tritanomalia / tritanopia | Azul (S) | Confusões entre azul/verde e amarelo/rosa. É rara |
| Acromatopsia | Todos | Nenhuma percepção de cor. É muito rara, mas um teste útil em escala de cinza |
“-anopia” significa que o tipo de cone está ausente; “-anomalia” significa que ele está deslocado, uma forma mais leve.
Como a simulação funciona
Cada pixel é convertido para RGB linear e multiplicado pelas matrizes de visão de cores de Machado, Oliveira e Fernandes (2009), um modelo fisiológico muito usado. Usa intensidade de 100% para os tipos “-anopia” e 60% para os tipos “-anomalia”. A acromatopsia usa luminância relativa. Tudo roda em um canvas no seu navegador, e imagens grandes são reduzidas para 900px de largura para ficar mais rápido.
Projetando para pessoas daltônicas
- Nunca dependa só da cor (WCAG 1.4.1): adicione ícones, rótulos, padrões ou texto a mensagens de status, erros de formulário e séries de gráficos.
- Varie a luminosidade, não só o matiz: um verde escuro e um vermelho claro continuam distinguíveis para quase todo mundo. O conversor OKLCH facilita o controle da luminosidade.
- Use paletas de gráficos seguras para daltônicos, como azul/laranja, em vez de vermelho/verde.
- Mantenha o contraste do texto alto. Verifique os pares com o Verificador de Contraste.
As simulações aproximam uma experiência média. A percepção individual varia, então testar com usuários reais continua sendo muito valioso.
Também pesquisado como: teste de daltonismo, daltonismo, protanopia, deuteranopia, simulador cvd, acessibilidade, teste de cores daltonismo.
Ferramentas que combinam com: Simulador de Daltonismo
- Verificador de Contraste APCA — Calcule o contraste de luminosidade APCA (Lc) entre texto e fundo, veja para quais usos ele é indicado e compare com a razão clássica do WCAG 2.
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- Gerador de cores do Tailwind — Cole uma cor da marca e obtenha uma escala de tons equilibrada de 11 etapas (50 a 950) integrada ao OKLCH — com dicas de contraste e exportações para Tailwind v3, v4, CSS e SCSS.
- Compressor de imagens — Reduz o tamanho das fotos e dos gráficos em 50–90% sem perda visível de qualidade.