Lição 3
Noções de contraste WCAG
Razões de contraste, metas AA/AAA e texto em fundos coloridos.
UI legível não é gosto subjetivo — é contraste mensurável entre texto e fundo.
Razão de contraste
WCAG define contraste como razão de 1:1 (idêntico) a 21:1 (preto no branco). Quanto maior, mais legível para mais pessoas, incluindo baixa visão e brilho forte ao ar livre.
Ferramentas calculam luminância relativa de primeiro e segundo plano e aplicam a fórmula padrão. Não confie no olho para texto cinza pequeno em cards tingidos.
AA vs AAA
Mínimos comuns para texto normal (abaixo de 18pt regular / 14pt bold):
| Nível | Razão mínima |
|---|---|
| WCAG AA | 4.5:1 |
| WCAG AAA | 7:1 |
Texto grande tem limites menores (3:1 para AA). Ícones e glifos decorativos podem ser isentos, mas rótulos interativos não.
Muitos times entregam AA como padrão; AAA para corpo de texto é ideal, mas nem sempre viável em fundos coloridos de marketing.
O fundo importa
O rótulo de um botão azul deve passar contraste contra o preenchimento do botão, não a página atrás do botão. Overlays semitransparentes compõem com o que estiver embaixo — cheque o pior caso de wallpaper ou foto.
Cores de status (success, warning, danger) costumam falhar com texto branco em saturações claras. Escureça o preenchimento ou use texto escuro.
Não dependa só da cor
Pontos de status vermelho/verde falham para daltônicos. Combine cor com ícones, rótulos ou padrões. Ferramentas de contraste não substituem codificação redundante.
Fluxo de teste
- Escolha tokens de primeiro plano e fundo do tema
- Meça contraste em conversor ou plugin de design
- Ajuste lightness antes do matiz ao corrigir falhas — em geral menos efeitos colaterais
- Re-teste estados hover/focus; são pares separados
Resumo
Entregue pares de texto com razões de contraste documentadas. Corrigir contraste depois do lançamento é caro; incorpore checagens na revisão de tokens.