Daltonismo: Projetando Interfaces de Cor Acessiveis

O daltonismo (deficiencia de visao de cores, ou CVD) e causado por funcao reduzida ou ausente de um ou mais dos tres tipos de celulas cone na retina. Essas celulas fotorreceptoras sao responsaveis por detectar cor em condicoes de luz diurna.

Como o olho detecta cor

A retina humana contem tres tipos de celulas cone, cada uma sensivel a uma faixa diferente de comprimentos de onda:

• Cones L (Longos) — sensibilidade maxima a ~564 nm (luz vermelha). Detectam tons quentes.
• Cones M (Medios) — sensibilidade maxima a ~534 nm (luz verde). Se sobrepoem significativamente com os cones L, por isso a confusao vermelho-verde e tao comum.
• Cones S (Curtos) — sensibilidade maxima a ~420 nm (luz azul). Muito menos numerosos que os cones L ou M.

A percepcao de cor surge da proporcao de sinais entre os tres tipos de cones. Quando um tipo esta ausente ou deslocado, certos pares de cores produzem a mesma proporcao de sinal e se tornam indistinguiveis.

Padrao de heranca

A maioria do daltonismo e recessivo ligado ao X. Os genes que codificam os fotopigmentos dos cones L e M estao no cromossomo X. Homens (XY) tem apenas um cromossomo X, entao uma unica copia defeituosa causa daltonismo. Mulheres (XX) precisam de copias defeituosas em ambos os cromossomos X — tornando-as muito menos propensas (0,5% vs 8% nos homens).

A deficiencia de visao de cores e classificada pelo tipo de cone afetado. A gravidade varia de tricromatismo anomalo (sensibilidade deslocada, leve) a dicromatismo (tipo de cone ausente, severo).

Deuteranopia (fraqueza verde) — ~5% dos homens

O tipo mais comum. Os cones M (verde) estao ausentes ou com sensibilidade deslocada. Vermelhos, verdes e marrons parecem muito semelhantes — todos deslocados para amarelo-marrom.

Protanopia (fraqueza vermelha) — ~2,5% dos homens

Os cones L (vermelho) estao ausentes ou deslocados. Similar a deuteranopia nas cores confundidas, mas os vermelhos tambem parecem significativamente mais escuros.

Tritanopia (azul-amarelo) — <0,01%

Os cones S (azul) estao ausentes ou deslocados. Azul e verde podem ser confundidos; amarelo e rosa parecem semelhantes. Extremamente rara e nao ligada ao X.

Monocromatismo — extremamente raro

Ausencia completa de toda funcao dos cones (acromatopsia). Pessoas afetadas veem inteiramente em tons de cinza. Muito raro (~1 em 30.000).

/* Paleta problematica — vermelho vs verde */
--status-success: #22c55e;
--status-error: #ef4444;

/* Paleta acessivel — azul vs laranja + icones */
--status-success: #2563eb;  /* azul */
--status-error: #ea580c;    /* laranja */
/* Sempre acompanhar com forma: icones check / X */

Quando a cor e o unico canal para transmitir significado, uma porcao significativa do seu publico recebe informacoes degradadas ou nenhuma.

Anti-padroes comuns

• Status semaforo — Indicadores vermelho/ambar/verde parecem identicos para deuteranopes.
• Validacao de formulario so com cor — Uma borda vermelha em campos invalidos e invisivel sem mensagem de texto ou icone.
• Graficos de pizza com segmentos vermelhos e verdes — Aparecem como uma unica cor sem rotulos ou padroes.
• Mapas de calor (gradientes vermelho-verde) — Aparecem como um amarelo-marrom uniforme.
• Links coloridos sem sublinhado — Se os links so se distinguem do texto pela cor, daltonicos nao podem encontra-los.
• Badges coloridos sem rotulos — "Prioridade: Alta" como ponto vermelho nao significa nada se vermelho e verde sao iguais.

Exemplo ruim: status so por cor

<!-- A cor e o unico sinal -->
<span style="color: red">Erro</span>
<span style="color: green">Sucesso</span>

<!-- Cor + icone + ARIA -->
<span style="color: #ea580c" role="alert">
  <svg aria-hidden="true">...</svg> Erro
</span>
<span style="color: #2563eb">
  <svg aria-hidden="true">...</svg> Sucesso
</span>

A segunda versao comunica o status por tres canais: cor, forma do icone e rotulo de texto.

As WCAG 2.1 definem proporcoes de contraste minimas para garantir que texto e elementos UI sejam percebiveis por usuarios com deficiencias visuais.

Limites de proporcao de contraste

• AA texto normal — minimo 4,5:1 (texto abaixo de 18px ou 14px negrito)
• AA texto grande (18px+) — minimo 3:1
• AA componentes UI e objetos graficos — minimo 3:1
• AAA texto normal — minimo 7:1 (nivel avancado)
• AAA texto grande — minimo 4,5:1

A formula: (L1 + 0.05) / (L2 + 0.05), onde L1 e a luminancia relativa da cor mais clara e L2 da mais escura.

Formula de luminancia relativa

A luminancia relativa e calculada convertendo valores sRGB em luz linear: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

:root {
  /* Conforme WCAG AA — todas as proporcoes verificadas */
  --text-primary: #1a1a2e;     /* 15.4:1 em branco */
  --text-secondary: #4a4a5a;   /* 7.2:1 em branco */
  --text-link: #1d4ed8;        /* 8.6:1 em branco */
  --bg-error: #fef2f2;
  --text-error: #991b1b;       /* 12.1:1 em #fef2f2 */
}

1. Nunca depender apenas da cor

Cada informacao transmitida por cor deve ter um sinal redundante: rotulo de texto, icone, padrao, posicao ou forma.

2. Usar paletas seguras para daltonicos

Azul e laranja sao distinguiveis por praticamente todos os tipos de visao de cores. Evite combinar vermelho com verde. As paletas IBM Design Language e ColorBrewer fornecem conjuntos pre-testados.

3. Adicionar padroes as visualizacoes de dados

Barras de graficos e fatias de pizza que diferem apenas pela cor sao inacessiveis:

/* Preenchimento com padrao para graficos */
.bar-a {
  background: #2563eb;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 8px
  );
}
.bar-b {
  background: #ea580c;
}

4. Suportar modos de alto contraste

Media queries CSS permitem adaptar o design:

@media (prefers-contrast: more) {
  :root {
    --border-color: #000;
    --text-muted: #333;
    --focus-ring: 3px solid #000;
  }
}

@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }
}

5. Testar com usuarios reais

Ferramentas automatizadas detectam falhas de proporcao de contraste, mas nao podem avaliar se a arquitetura de informacao depende da cor.

Simulacao no navegador

Chrome DevTools inclui um simulador integrado de deficiencia de visao de cores. Abra DevTools (F12), pressione Ctrl+Shift+P, digite "Rendering", role ate Emulate vision deficiencies e selecione entre Deuteranopia, Protanopia, Tritanopia, Acromatopsia ou Visao desfocada.

Plugins para ferramentas de design

• Figma — Integrado: Menu > View > Color blindness simulation. Plugin "Color Blind" tambem disponivel.
• Sketch — O plugin "Stark" oferece verificacao de contraste e simulacao de daltonismo.
• Adobe XD — Use o plugin "Include" ou "Stark" para previsualizacoes de acessibilidade.

Auditorias automatizadas

• WAVE — Extensao do navegador que sinaliza erros de contraste e texto alt ausente.
• axe DevTools — Auditoria de acessibilidade completa integrada no Chrome DevTools.
• Lighthouse — Integrado no Chrome. Execute uma auditoria de Acessibilidade na aba Lighthouse.

Simulacao com filtros CSS

Voce pode aproximar a simulacao de daltonismo com filtros CSS usando um feColorMatrix SVG:

/* Simular deuteranopia com filtro CSS (aproximacao) */
.simulate-deuteranopia {
  filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='d'><feColorMatrix values='0.625 0.375 0 0 0 0.7 0.3 0 0 0 0 0.3 0.7 0 0 0 0 0 1 0'/></filter></svg>#d");
}

/* Ou use Chrome DevTools:
   1. Abra DevTools (F12)
   2. Ctrl+Shift+P → "Rendering"
   3. Role ate "Emulate vision deficiencies"
   4. Selecione: Deuteranopia / Protanopia / Tritanopia */

Note que matrizes de filtros CSS sao aproximacoes. Para testes precisos, use a simulacao do Chrome DevTools ou ferramentas dedicadas como o Simulador de Daltonismo PixCode.