Contraste e acessibilidade de cores: WCAG na prática

Uma paleta pode ser elegante no portfólio e um pesadelo na tela de quem tem baixa visão. Acessibilidade de cor não é um detalhe para o fim do projeto: é o que determina se o seu conteúdo é legível para todo mundo. A boa notícia é que as regras são objetivas e fáceis de aplicar. Vamos a elas.

Por que contraste importa tanto

Cerca de uma em cada doze pessoas tem alguma deficiência de visão de cores, e milhões têm baixa visão por idade ou condição. Some a isso o uso ao sol, em telas baratas e em ambientes claros. Texto com pouco contraste falha para uma fração enorme do público, mesmo entre pessoas sem deficiência.

O que é razão de contraste

A razão de contraste é um número que compara a luminosidade do texto com a do fundo. Vai de 1:1 (texto invisível, mesma cor) a 21:1 (preto sobre branco). Quanto maior o número, mais legível. As diretrizes WCAG definem pisos mínimos com base nesse cálculo.

Os níveis WCAG na prática

As Web Content Accessibility Guidelines definem dois níveis principais de contraste para texto. Conhecê-los resolve a maioria das decisões:

Na prática, mire em AA como piso inegociável e busque AAA em conteúdo crítico, como textos longos e formulários. AA não é meta ambiciosa; é o mínimo civilizado.

Como medir

Qualquer verificador de contraste resolve: você informa a cor do texto e a do fundo e recebe a razão e se passa em AA ou AAA. Ferramentas de design já trazem isso embutido. Não há desculpa para chutar.

Daltonismo: projete sem depender só de cor

A forma mais comum de daltonismo afeta a distinção entre vermelho e verde. Isso quebra padrões clássicos de interface, como "verde igual a certo, vermelho igual a errado". Se a única pista é a cor, parte do público fica sem a informação.

A regra de ouro é simples: a cor nunca deve ser o único portador de significado. Reforce sempre com outro sinal.

Se a sua interface deixa de funcionar em preto e branco, ela depende demais da cor.

Armadilhas comuns de contraste

Alguns padrões da moda são bonitos e inacessíveis. Fique atento a:

Texto sobre imagem

Banners com texto sobre foto são uma fonte clássica de falha. A solução é aplicar um overlay semitransparente ou um degradê atrás do texto, garantindo contraste mesmo quando a imagem é clara em algumas áreas e escura em outras.

Como embutir acessibilidade no fluxo

Conclusão acionável

Acessibilidade de cor se resume a dois compromissos: garantir contraste mínimo AA em todo texto e nunca usar a cor como único portador de significado. Comece hoje rodando seus pares de texto e fundo em um verificador de contraste. O que falhar, ajuste. Você vai melhorar a experiência para todo o público, não só para quem tem deficiência visual.