Um texto cinzento claro sobre branco pode parecer "elegante" no mockup do Figma no ecrã do designer com o brilho no máximo, e ser ilegível para o resto do mundo com o telemóvel ao sol. As diretrizes WCAG (Web Content Accessibility Guidelines) existem precisamente para não deixar isso ao critério de cada um.
O que é o rácio de contraste
É um número entre 1:1 (mesma cor, sem contraste) e 21:1 (preto puro sobre branco puro, o máximo possível). Calcula-se a partir da luminância relativa de cada cor — não é apenas "subtrair o brilho", a fórmula tem em conta que o olho humano perceciona o verde com mais intensidade do que o azul, por isso pondera cada canal de forma diferente antes de comparar.
Os mínimos exigidos pela WCAG 2.1
| Nível | Texto normal | Texto grande (≥18pt ou ≥14pt negrito) |
|---|---|---|
| AA (mínimo legal em muitos países) | 4,5:1 | 3:1 |
| AAA (ótimo) | 7:1 | 4,5:1 |
"Texto normal" é praticamente todo o teu conteúdo: parágrafos, labels de formulário, texto de botões pequenos. O limiar mais baixo (3:1) só se aplica a títulos grandes e texto a negrito de tamanho generoso.
Os erros mais comuns
- Placeholder cinzento claro em inputs — costuma andar à volta de 2,5:1, bem abaixo do mínimo.
- Texto de marca sobre fundo de marca — um azul corporativo sobre outro azul corporativo quase nunca chega a 4,5:1.
- Botões "ghost" com contorno e texto da mesma cor pastel — bonitos, ilegíveis.
- Confiar no contraste num monitor de designer calibrado com painel P3; o utilizador real vê-o num ecrã barato com brilho baixo.
Como corrigir sem repensar a paleta
Não é preciso deitar fora a paleta da marca. Quase sempre basta escurecer ou clarear a luminosidade (o canal L em HSL) da cor problemática mantendo o matiz — o nosso misturador de cores e o seletor de cor deixam-te ajustar em HSL em tempo real enquanto verificas o rácio resultante.
Verifica qualquer combinação com o verificador de contraste WCAG: cola a cor do texto e a do fundo, e vês o rácio exato e se passa AA ou AAA, tanto para texto normal como grande. Se precisares de variações de uma cor base que mantenham a identidade visual, o gerador de paletas gera esquemas análogos, complementares e monocromáticos já pensados para ter um bom intervalo de luminosidade.