Um texto cinzento claro sobre fundo branco pode parecer elegante numa maquete e tornar-se difícil de ler num telemóvel ao sol. Um botão que só comunica o estado através de uma mudança de cor pode ser difícil de compreender para quem distingue mal certos tons.
O contraste não é, portanto, apenas uma preferência estética: faz parte da acessibilidade visual.
Limites principais
Para texto, os valores WCAG mais conhecidos são:
| Situação | AA | AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande | 3:1 | 4,5:1 |
Para certos componentes e gráficos necessários à utilização da interface, o contraste não textual usa normalmente 3:1 em relação às cores adjacentes relevantes.
Estes números não contam toda a história. Uma interface pode ter bom contraste no texto e continuar problemática se erros dependerem apenas do vermelho, bordas de campos forem quase invisíveis ou o estado de foco desaparecer.
O que é a relação de contraste?
Compara a luminância relativa de duas cores. Vai de 1:1, quando têm luminância igual, até 21:1 entre preto e branco.
Não mede diretamente diferença de hue, saturação, distância HSL ou qualidade estética. Duas cores visualmente diferentes podem ter luminâncias próximas.
O verificador de contraste permite testar rapidamente uma combinação.
Porque a lightness HSL não basta?
Duas cores com L=50% em HSL não têm necessariamente a mesma luminância relativa. Amarelo e azul podem partilhar a mesma lightness numérica e ter comportamentos de contraste completamente diferentes.
A L de HSL não é a luminância usada pelas WCAG. Não tente deduzir o contraste apenas por esse valor.
Como se calcula?
A fórmula é:
(L1 + 0,05) / (L2 + 0,05)onde L1 é a luminância da cor mais clara e L2 a da mais escura. Os componentes sRGB são transformados segundo a fórmula WCAG antes de serem ponderados.
Na prática, um calculador é mais útil; conhecer a fórmula mostra sobretudo que o resultado é uma medida definida e não uma apreciação subjetiva.
O que significa 4,5:1?
Para texto normal, o nível AA exige pelo menos 4,5:1 salvo exceções do critério. Se a combinação não atinge o valor, deve alterar texto, fundo ou ambos.
Evite desenhar exatamente no limite quando pode criar alguma margem. Um contraste ligeiramente superior é mais robusto face a estados, dispositivos e pequenas alterações de estilo.
Texto grande
Para texto grande, o limite AA é 3:1. Esta regra não deve ser usada como desculpa para aumentar ligeiramente um texto e manter uma cor difícil de ler.
Legibilidade também depende de tamanho, peso da fonte, ecrã e condições de visualização.