Cores & Contraste
Razões de contraste WCAG · Daltonismo · Uso correto da cor
Razões de Contraste Exigidas
A razão de contraste é calculada entre a cor mais clara e a mais escura. O valor vai de 1:1 (nenhum contraste) a 21:1 (preto sobre branco).
| Tipo de Elemento | Nível AA | Nível AAA |
|---|---|---|
| Texto normal (<18pt / <14pt negrito) | 4,5:1 | 7:1 |
| Texto grande (≥18pt ou ≥14pt negrito) | 3:1 | 4,5:1 |
| Componentes de UI (bordas de input, ícones informativos) | 3:1 | — |
| Gráficos informativos e partes de gráficos | 3:1 | — |
| Texto decorativo / logotipos | Isento | Isento |
| Texto em imagem | 4,5:1 | 7:1 |
| Indicador de foco (WCAG 2.4.13, AAA) | — | 3:1 |
Exemplos visuais
Tipos de Daltonismo
Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de daltonismo. É a deficiência visual mais comum no mundo.
Deuteranopia / Deuteranomalia
Dificuldade de distinguir vermelho e verde. Tipo mais comum, afeta ~6% dos homens. Ausência ou disfunção dos cones verdes (M-cones).
Protanopia / Protanomalia
Ausência ou disfunção dos cones vermelhos (L-cones). Confusão similar à deuteranopia; vermelho parece escuro. Afeta ~1% dos homens.
Tritanopia / Tritanomalia
Dificuldade de distinguir azul e amarelo. Rara (<0,01%), afeta homens e mulheres igualmente. Ausência de cones azuis (S-cones).
Acromatopsia
Ausência total de percepção de cor — enxerga apenas em escala de cinza. Muito rara (0,003%). Também causa sensibilidade à luz intensa.
Como simular daltonismo durante o desenvolvimento
- Chrome DevTools → More tools → Rendering → Emulate vision deficiencies (deuteranopia, protanopia, tritanopia, acromatopsia, blur)
- Colour Contrast Analyser (TPGI) — app desktop que mede contraste de qualquer pixel na tela
- Who Can Use (whocanuse.com) — visualiza como diferentes usuários enxergam uma combinação de cores
- Figma com plugin "Able" ou "Color Blind" para simular direto no design
Nunca Use Cor Como Único Indicador
WCAG 1.4.1 (Nível A): a cor não deve ser o único meio visual de transmitir informação, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual.
Errado — apenas cor
Campos obrigatórios estão em vermelho
Usuário com protanopia não vê a diferença
Gráfico sem rótulos — indecifrável para daltônicos
Correto — cor + outro indicador
* Nome (asterisco + cor + rótulo "obrigatório")
Rótulo de texto junto à cor
Espaçamento de Texto (WCAG 1.4.12 — AA)
O conteúdo não deve perder funcionalidade quando o usuário aplica estas configurações de espaçamento:
- Altura de linha ≥ 1,5× o tamanho da fonte
- Espaço entre parágrafos ≥ 2× o tamanho da fonte
- Espaçamento de letras ≥ 0,12× o tamanho da fonte
- Espaçamento de palavras ≥ 0,16× o tamanho da fonte
Use unidades relativas (em, rem) em vez de valores fixos em px para garantir que o texto se adapte corretamente.