Simulador de daltonismo

Por que projetar para a deficiência da visão das cores importa

A deficiência da visão das cores (DVC) é comum. O National Eye Institute dos EUA relata que cerca de 1 em cada 12 homens tem alguma forma de DVC; as mulheres são afetadas a uma taxa muito menor, porque as formas mais comuns são herdadas por genes recessivos ligados ao cromossomo X. Somada, a população global com algum nível de DVC chega às centenas de milhões. Qualquer design voltado ao usuário que dependa do vermelho e do verde para transmitir significado (indicadores de erro vs. sucesso, gráficos, selos de status, mensagens de validação) vai falhar para uma fatia significativa de usuários, a menos que a cor seja combinada com outra pista.

Isto também é um requisito formal de acessibilidade. O Critério de Sucesso 1.4.1 da WCAG 2.2 («Uso de cores»), Nível A enuncia a regra diretamente: «A cor não é usada como o único meio visual de transmitir informação, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual.» O Nível A é a barra de conformidade mais baixa da WCAG: falhar nele significa que um site não é apenas inacessível, mas também juridicamente não conforme em jurisdições que exigem a conformidade com a WCAG (Section 508 dos EUA, Lei de Acessibilidade da UE, Lei de Igualdade do Reino Unido).

As oito formas de DVC

A visão de cores humana depende de três tipos de fotorreceptor cone: cones L (comprimento de onda longo, pico perto do vermelho), cones M (comprimento de onda médio, pico perto do verde) e cones S (comprimento de onda curto, pico perto do azul-violeta). Cada forma de DVC corresponde a um desses cones estar ausente (-anopia) ou ter a sensibilidade deslocada (-anomalia).

A deuteranomalia é a forma mais prevalente porque os genes dos fotopigmentos dos cones L e M são adjacentes no cromossomo X e diferem por apenas alguns aminoácidos. Pequenas mutações deslocam facilmente o pico de sensibilidade do cone M para mais perto do cone L, reduzindo a capacidade do cérebro de discriminar entre vermelho e verde.

Por que os homens são afetados com mais frequência

Os genes dos fotopigmentos do cone L (OPN1LW) e do cone M (OPN1MW) ficam ambos no cromossomo X. Os homens herdam apenas um X (da mãe); as mulheres herdam dois (um de cada genitor). Para que uma deficiência recessiva se manifeste, uma mulher precisaria do gene deficiente em ambos os cromossomos X, enquanto um homem só precisa dele no seu único X. A aritmética produz uma diferença de cerca de 10× na prevalência entre homens e mulheres, especificamente para a DVC vermelho-verde. O gene do cone S fica no cromossomo 7 e é autossômico: a tritanopia e a tritanomalia afetam homens e mulheres em taxas semelhantes, mas ambas as formas já são muito raras de início.

Os requisitos de contraste da WCAG também se aplicam

Além do CS 1.4.1, a WCAG também impõe taxas mínimas de contraste para texto e componentes de interface, todas medidas em relação ao par de cores realmente visível:

• CS 1.4.3 Contraste (mínimo), Nível AA: pelo menos 4,5:1 para texto de corpo normal, 3:1 para texto grande ou em negrito.
• CS 1.4.6 Contraste (aprimorado), Nível AAA: 7:1 para texto normal, 4,5:1 para texto grande.
• CS 1.4.11 Contraste não textual, Nível AA: 3:1 para componentes de interface e objetos gráficos (bordas de botões, indicadores de foco, contornos de ícones).

Use este simulador junto com um verificador de contraste. Duas cores podem ter uma taxa de contraste perfeitamente adequada de 4,5:1 na visão normal e ainda assim serem indistinguíveis para uma pessoa com deuteranopia. O simulador detecta o segundo modo de falha que a verificação de contraste pura deixa passar.

Armadilhas comuns de design e suas correções

• Indicadores de status em vermelho / verde para sucesso vs. erro. Combine com um ícone (✗ / ✓), um rótulo de texto ou formas distintas. Nunca dependa apenas do matiz.
• Links coloridos sem sublinhado. Muitos usuários com DVC não conseguem distinguir um link colorido do texto de corpo ao redor. Adicione um sublinhado, uma mudança no peso da fonte, ou ambos.
• Gráficos de barras coloridos apenas por categoria. Adicione padrões, rótulos diretos ou use uma paleta segura para daltônicos (Viridis, Cividis, Magma, Okabe-Ito, os conjuntos seguros para DVC do ColorBrewer).
• Mapas de calor com gradientes de vermelho→verde. Mude para paletas perceptualmente uniformes: o Viridis do Matplotlib (padrão desde 2017) e o Cividis (Nuñez et al, 2018, projetado especificamente para quem tem DVC) são ambos seguros.
• Validação de formulário apenas por texto vermelho. Combine com um ícone, uma mensagem de erro explícita e uma mudança visível no contorno do campo.
• Instruções do tipo «Clique no botão verde». Refira-se à posição ou ao rótulo, não à cor.
• Legendas de mapa com matizes semelhantes. Mapas coropléticos com escalas vermelho-laranja-amarelo podem colapsar em duas cores indistinguíveis sob deuteranopia. Use uma escala de matiz único (de azul-claro a azul-escuro) ou uma paleta divergente segura para DVC.
• Códigos de cor no design de jogos. Notoriamente, os Apricorns dos primeiros Pokémon Crystal e os PokéStops originais codificados por cor no Pokémon GO apresentavam decisões de vermelho-verde que eram insolúveis para muitos jogadores com DVC.

Paletas seguras para daltônicos

• Viridis: a paleta sequencial padrão do Matplotlib desde 2017. Perceptualmente uniforme tanto na visão normal quanto na DVC.
• Cividis: projetado especificamente para quem tem DVC (Nuñez, Anderton e Renslow, PLOS ONE 2018). Mantém uma distância perceptual uniforme mesmo com deuteranopia ou protanopia simuladas.
• ColorBrewer: as paletas de Cynthia Brewer para cartografia. O site marca explicitamente as variantes seguras para DVC para dados sequenciais, divergentes e qualitativos.
• Okabe-Ito: uma paleta qualitativa de oito cores projetada por Masataka Okabe e Kei Ito para acessibilidade em publicações científicas. A paleta recomendada como primeira escolha para dados categóricos com até 8 categorias.

O DevTools do navegador também tem simuladores de DVC

Tanto o DevTools do Chrome quanto o do Edge têm uma opção integrada «Emulate vision deficiencies» (na aba Rendering) que pode simular protanopia, deuteranopia, tritanopia e acromatopsia em toda a viewport. O Accessibility Inspector do Firefox expõe um simulador semelhante. Eles são ótimos para auditorias de página inteira durante as revisões de design: esta ferramenta de cor única os complementa isolando uma amostra de cada vez, para que você possa tomar uma decisão de paleta sem o resto da página atrapalhar a comparação.

Testes diagnósticos dos quais você talvez já tenha ouvido falar

• Placas de Ishihara (Shinobu Ishihara, 1917), as famosas placas de pontos coloridos com números ocultos. Padrão em ambientes clínicos para triagem de deficiências de vermelho-verde.
• Teste de 100 matizes de Farnsworth-Munsell: organize as fichas em ordem contínua de matiz. Testa a discriminação sutil, não apenas a presença sim/não de DVC.
• Anomaloscópio: ajuste uma mistura de vermelho-verde para corresponder a uma referência amarela. Usado para a classificação clínica do tipo e da gravidade da DVC.

Esta ferramenta não é um diagnóstico: ela simula como uma determinada cor aparece para alguém com várias formas de DVC, para que você possa projetar levando isso em conta, não para testar a visão de alguém.

Erros comuns

1. Tratar a DVC como uma preocupação de nicho. Um em cada 12 homens é uma parcela significativa da base de usuários de qualquer produto de consumo, e a maioria deles nunca relata isso porque conviveu com isso a vida inteira.
2. Presumir que o «modo escuro» ou o «alto contraste» resolvem. Contraste e DVC são eixos independentes. Uma paleta de alto contraste ainda pode depender de distinções de vermelho-verde que falham.
3. Testar apenas com deuteranopia. A deuteranopia é a forma mais comum, mas não a única: protanopia, tritanopia e as variantes parciais -anomalia produzem confusões diferentes. Percorra todas elas.
4. Usar apenas o simulador, ignorando o verificador de contraste. Uma paleta pode ser segura para DVC e ainda assim falhar nos mínimos de contraste da WCAG 1.4.3. Use as duas ferramentas.
5. Escolher cores pelo nome em vez de pela distância percebida. «Vermelho, verde e azul» soa bem separado; na DVC pode colapsar em «escuro, escuro, azul.» Teste as amostras de verdade.

Perguntas frequentes

Quão precisa é a simulação?

A simulação de DVC é uma aproximação, não uma renderização perfeita. Os algoritmos padrão (o método de Brettel, Viénot e Mollon de 1997, refinado por Viénot em 1999 e por Machado et al em 2009) projetam uma cor sobre a «linha de confusão» do cone ausente ou deslocado no espaço de cor LMS. O resultado é o que alguém com dicromacia completa veria, em média, mas os usuários reais com DVC variam individualmente: o cérebro compensa com pistas de luminância, contexto e experiência prévia que uma simulação estática não consegue replicar.

Minha imagem ou cor é enviada para algum lugar?

Não. A simulação roda inteiramente no seu navegador usando um elemento canvas para aplicar a transformação de cor pixel a pixel. Nada é enviado, registrado ou armazenado. Isso importa quando a imagem que você está testando é um mock-up de design ainda não lançado, uma captura de tela de uma interface confidencial, ou qualquer outra coisa que você não compartilharia com um terceiro.

Devo projetar para todas as oito formas de DVC?

Na prática, projetar para as formas mais comuns (deuteranopia e deuteranomalia) cobre a grande maioria dos usuários. Acrescentar uma verificação contra a protanopia cobre a maior parte do restante. A tritanopia e a tritanomalia são raras o suficiente para que passar nos testes deutan / protan seja geralmente suficiente, embora um design devidamente acessível que não dependa de matiz algum (combinado com ícones, padrões ou rótulos) cubra todo mundo automaticamente.

Minha paleta atual tem «CVD-safe» no nome. Ainda preciso testar?

Sim. «CVD-safe» geralmente significa que as cores de categoria da paleta são distinguíveis sob simulação, mas assim que você compõe uma interface real (texto sobre um fundo colorido, um ícone sobre um preenchimento, um estado de hover deslocado em 5% de luminosidade) você pode reintroduzir a confusão. Teste os seus pares de cores compostos, não apenas a paleta de origem.

Qual é a diferença entre protanopia e protanomalia?

A protanopia é a ausência do fotopigmento do cone L (vermelho): a pessoa afetada não tem nenhuma sensibilidade funcional ao vermelho. A protanomalia é um deslocamento no pico de sensibilidade do cone L, em vez de sua ausência: a pessoa afetada tem uma discriminação do vermelho reduzida, mas não nula. O mesmo padrão vale para deutera-/deuter- e trita-/triton-: -anopia é a forma forte, -anomalia é a forma parcial.

Os óculos corretores de cor (EnChroma) realmente funcionam?

Para muitas pessoas com deficiência de vermelho-verde, sim: eles ampliam a distância percebida entre certos vermelhos e verdes filtrando comprimentos de onda específicos que se sobrepõem entre os cones L e M. Eles não «curam» a DVC nem fazem um dicromata ver as cores normalmente; a situação do fotopigmento permanece inalterada. A eficácia varia conforme o indivíduo e a condição de iluminação; a luz do dia ao ar livre tende a ser onde mais ajudam.

Ferramentas relacionadas