Contraste, Cores e Tipografia Acessível
1. Por que contraste importa
Baixa visão afeta uma parcela grande da população — muito além de quem usa óculos. Texto com contraste insuficiente contra o fundo é ilegível para pessoas com baixa visão, daltonismo, ou simplesmente sob luz solar forte na tela. O WCAG define contraste através da razão de contraste, calculada a partir da luminância relativa de duas cores, variando de 1:1 (sem contraste, cores idênticas) a 21:1 (preto puro sobre branco puro).
2. Os critérios de sucesso do WCAG
- 1.4.3 Contraste (Mínimo) — nível AA: texto normal precisa de razão de contraste de pelo menos 4.5:1; texto grande (a partir de 18pt, ou 14pt em negrito) precisa de pelo menos 3:1.
- 1.4.6 Contraste (Melhorado) — nível AAA: 7:1 para texto normal, 4.5:1 para texto grande.
- 1.4.11 Contraste de Não-Texto — nível AA: componentes de interface (bordas de campos de formulário, ícones significativos, indicadores de foco) e elementos gráficos precisam de pelo menos 3:1 de contraste contra as cores adjacentes.
3. Como calcular e testar
Você não precisa calcular a fórmula manualmente — ferramentas como o WebAIM Contrast Checker fazem isso automaticamente: basta informar a cor do texto e a cor de fundo (em hexadecimal) para obter a razão exata e saber se ela passa nos níveis AA e AAA.
4. Daltonismo e uso de cor
Cerca de 1 em cada 12 homens e 1 em cada 200 mulheres tem alguma forma de daltonismo (o mais comum é a deuteranopia/protanopia, dificuldade em distinguir vermelho de verde). O critério 1.4.1 Uso de Cor (nível A) exige que a cor nunca seja o único meio de transmitir uma informação: "campos obrigatórios estão em vermelho" precisa também de um ícone, texto ("*obrigatório") ou outro indicador não-visual-de-cor.
5. Tipografia legível
- Evite justificar texto (cria espaçamentos irregulares difíceis de ler para pessoas com dislexia).
- Altura de linha de pelo menos 1.5x o tamanho da fonte (critério 1.4.12 Espaçamento de Texto).
- Evite fontes exclusivamente decorativas para blocos de texto corrido.
- Permita zoom de até 200% sem perda de conteúdo ou funcionalidade (critério 1.4.4 Redimensionar Texto).
- Fontes desenhadas para legibilidade (como Atkinson Hyperlegible, usada por várias organizações de acessibilidade) ajudam pessoas com baixa visão a distinguir caracteres parecidos (ex.: "l", "I", "1").