Contraste WCAG: como tornar as cores acessíveis?

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.

Contraste não textual

Bordas de input, ícones necessários, indicadores de estado e elementos gráficos essenciais podem precisar de 3:1. Se um controlo desaparece visualmente, o utilizador pode não perceber onde interagir.

Não depender apenas da cor

Um erro não deve ser indicado exclusivamente através de vermelho. Adicione texto, ícone, etiqueta ou outra informação. O mesmo princípio aplica-se a gráficos, links e estados selecionados.

Transparência e fundos complexos

Uma cor com alpha produz resultados diferentes conforme o fundo. Meça o contraste sobre a cor efetivamente composta.

Para texto sobre fotografias ou gradientes, uma única medição pode não ser suficiente. Verifique as zonas reais ou use um overlay que estabilize o fundo.

Estados interativos

Teste default, hover, focus, active, disabled, selected e error. Um botão pode passar no estado normal e falhar quando recebe hover ou foco.

Como corrigir

Pode escurecer o texto, clarear o fundo, alterar ambos ou criar uma variante da paleta própria para texto e componentes.

Uma cor de marca que funciona numa superfície decorativa pode não ser adequada como texto. É normal usar tons distintos para papéis distintos.

A reter

A relação WCAG é um controlo essencial, mas não suficiente. Meça as cores realmente apresentadas, teste todos os estados, não use cor como único canal de significado e valide o resultado no contexto real da interface.