Contraste de cores e acessibilidade (WCAG)

Contraste de cores é a diferença de luminância entre um texto e o fundo em que ele está. É a regra de acessibilidade mais objetiva que existe — tem número, tem fórmula e é verificável automaticamente — e é também uma das mais violadas em design.

A razão de contraste

razão = (L1 + 0,05) ÷ (L2 + 0,05)

Onde L1 é a luminância relativa da cor mais clara e L2 a da mais escura. O resultado vai de 1:1 (duas cores idênticas, texto invisível) a 21:1 (preto puro sobre branco puro).

A luminância relativa não é o brilho aparente: cada canal RGB é normalizado, linearizado por uma curva gama e ponderado, com o verde contribuindo muito mais que o azul — porque o olho humano é mais sensível a ele. Por isso duas cores com a mesma "escuridão" percebida podem ter contrastes muito diferentes.

Os limites do WCAG

Elemento	Nível AA	Nível AAA
Texto normal	4,5:1	7:1
Texto grande (≥ 24 px, ou ≥ 19 px em negrito)	3:1	4,5:1
Componentes de interface e gráficos	3:1	—
Texto decorativo ou logotipo	isento	isento

O nível AA é o padrão adotado pela maioria das legislações de acessibilidade digital e o alvo prático para qualquer site. O AAA é recomendado onde o público inclui muitas pessoas com baixa visão.

Por que 4,5:1 e não outro número

O valor não é arbitrário. Ele parte da premissa de que uma pessoa com acuidade visual de 20/40 — perda comum a partir dos 60 anos, e não considerada deficiência — enxerga com contraste efetivo reduzido em relação a uma pessoa de visão normal. O 4,5:1 é o valor que compensa essa perda.

É por isso que contraste não é uma questão de nicho: ele afeta qualquer pessoa acima de certa idade, e qualquer pessoa em condição adversa — celular ao sol, tela com brilho reduzido para poupar bateria, monitor barato, olho cansado no fim do dia.

Os erros mais comuns

• Texto cinza-claro sobre branco. O cinza #999999 sobre branco dá 2,85:1 — reprova. Para passar em AA sobre branco, o cinza precisa ser no mínimo #767676 (4,54:1).
• Placeholder de formulário. Costuma ser o elemento mais claro da página e frequentemente carrega informação essencial. Se o placeholder é a única indicação do que preencher, ele precisa cumprir a regra de texto normal.
• Texto sobre imagem. O contraste varia pixel a pixel. A solução é uma camada semitransparente ou sombra sob o texto — nunca confiar na foto.
• Estado desabilitado. Botões inativos costumam ser isentos, mas se a única forma de descobrir que algo está desabilitado for a cor clara, a informação se perde.
• Só a cor para indicar significado. Campo com borda vermelha para erro exclui quem não distingue vermelho — cerca de 8% dos homens têm alguma deficiência na percepção de cores. Acrescente ícone ou texto.

Um detalhe que derruba muito design bonito

Cores vivas e saturadas enganam. Um verde-limão vibrante parece forte, mas tem luminância alta — quase tanto quanto o branco. Texto branco sobre esse verde pode dar razão de 1,5:1, ilegível, ainda que a combinação pareça viva na tela do designer.

A regra prática: saturação não é contraste. O que importa é a distância de luminância, e ela é dominada pelo canal verde. Trocar um azul por um verde com a mesma "intensidade" pode alterar completamente o resultado do teste.

Como consertar sem refazer o design

Quase toda reprovação de contraste se resolve mexendo em uma variável só, e a ordem abaixo preserva a identidade visual:

1. Escureça a cor do texto, não mude o matiz. Ferramentas de cor permitem baixar só a luminosidade mantendo matiz e saturação — o verde continua sendo o mesmo verde, só mais escuro.
2. Se o texto é claro sobre fundo colorido, escureça o fundo. É o caminho mais comum em botões: manter o texto branco e escurecer o preenchimento resolve sem alterar a hierarquia.
3. Aumente o tamanho ou o peso da fonte. A partir de 24 px (ou 19 px em negrito) o limite cai de 4,5:1 para 3:1 — às vezes é a mudança menos invasiva.
4. Só então reconsidere a paleta.

Vale automatizar: um verificador rodando junto com o build pega regressões que ninguém nota a olho. Escurecer o fundo em um tom pode derrubar o texto secundário abaixo do limite sem que nada quebre visualmente.

Perguntas frequentes

Como testo o contraste do meu site? Ferramentas de verificação de contraste calculam a razão a partir de duas cores em hexadecimal. Navegadores modernos também trazem auditoria de acessibilidade embutida nas ferramentas de desenvolvedor, que varre a página inteira e lista as reprovações.

Tema escuro precisa dos mesmos números? Precisa, e ele não passa automaticamente. Um texto que funciona no tema claro pode reprovar no escuro e vice-versa — os dois temas devem ser verificados separadamente, sempre.

Contraste alto demais é problema? Pode ser. Preto puro sobre branco puro (21:1) causa desconforto e sensação de tremulação em algumas pessoas, sobretudo com dislexia ou sensibilidade à luz. Cinza muito escuro sobre branco levemente cremoso costuma ser mais confortável e ainda passa com folga.

A regra vale para ícones? Vale para os que transmitem informação: ícones funcionais e bordas de campos precisam de 3:1 contra o fundo adjacente. Elementos puramente decorativos são isentos.

Fonte: W3C — Web Content Accessibility Guidelines (WCAG) 2.2, critérios 1.4.3 (Contraste mínimo), 1.4.6 (Contraste aprimorado) e 1.4.11 (Contraste de elementos não textuais).