Por que o contraste entre texto e fundo importa
Contraste é a diferença de luminância entre duas cores. Quando ela é pequena, o texto se mistura ao fundo e a leitura exige esforço, ou simplesmente não acontece. Isso afeta muito mais gente do que parece:
- Pessoas com baixa visão, que dependem de uma diferença clara de claro e escuro para distinguir as letras.
- O envelhecimento natural dos olhos: com a idade, o cristalino fica menos transparente e a sensibilidade ao contraste diminui. Um cinza que parece elegante para quem tem 25 anos pode ser ilegível aos 65.
- Condições de uso ruins: celular sob o sol, brilho de tela reduzido para poupar bateria, projetores fracos e monitores mal calibrados.
- Pessoas com daltonismo, que podem perceber como parecidas cores de matizes diferentes. O contraste de luminância continua funcionando mesmo quando a diferença de matiz se perde.
Por isso as diretrizes de acessibilidade medem luminância, e não matiz: é o indicador que melhor prevê se um texto será legível para o maior número de pessoas.
Os critérios de contraste da WCAG 2.2
A WCAG (Web Content Accessibility Guidelines), publicada pelo W3C, tem três critérios de sucesso ligados a contraste de cor. A versão 2.2 manteve os mesmos valores das versões 2.0 e 2.1:
- 1.4.3 Contraste (mínimo), nível AA: texto e imagens de texto precisam de pelo menos 4,5:1, ou 3:1 se o texto for grande.
- 1.4.6 Contraste (melhorado), nível AAA: sobe para 7:1 em texto normal e 4,5:1 em texto grande.
- 1.4.11 Contraste não textual, nível AA: componentes de interface (bordas de campos, botões sem texto, ícones que transmitem informação) e partes de gráficos necessárias para entender o conteúdo precisam de 3:1 em relação às cores vizinhas.
| Selo na ferramenta | Critério | Razão mínima |
|---|---|---|
| AA texto normal | 1.4.3 | 4,5:1 |
| AA texto grande | 1.4.3 | 3:1 |
| AAA texto normal | 1.4.6 | 7:1 |
| AAA texto grande | 1.4.6 | 4,5:1 |
| Componentes de interface | 1.4.11 | 3:1 |
Os limites não são arredondados: uma combinação de 4,49:1 falha no AA para texto normal. Há exceções previstas na norma, como logotipos, texto puramente decorativo e componentes desabilitados. O texto completo está na documentação oficial do W3C.
O que conta como texto grande
Para a WCAG, texto grande é aquele com pelo menos 18 pontos (cerca de 24 px) em peso normal, ou 14 pontos (cerca de 18,66 px) em negrito. Letras maiores e mais grossas têm traços mais largos, por isso continuam legíveis com menos contraste.
Na prática, títulos costumam se encaixar como texto grande; corpo de texto, legendas, rótulos de formulário e links em parágrafos, não. Fontes muito finas ou com desenho incomum podem precisar de mais contraste do que o mínimo, mesmo em tamanho grande.
Como a razão de contraste é calculada
O cálculo tem duas etapas. Primeiro, cada cor é convertida em luminância relativa, um valor de 0 (preto) a 1 (branco). Para isso, cada canal RGB é dividido por 255 e linearizado, desfazendo a curva gama do sRGB:
c = valor ÷ 255
se c ≤ 0,04045: c = c ÷ 12,92
senão: c = ((c + 0,055) ÷ 1,055) ^ 2,4
L = 0,2126 × R + 0,7152 × G + 0,0722 × BOs pesos refletem a sensibilidade do olho: enxergamos o verde como muito mais claro que o azul. Depois, a razão é (L1 + 0,05) ÷ (L2 + 0,05), com L1 sendo a cor mais clara.
Exemplo com #FF5733: os canais linearizados são R = 1, G ≈ 0,0953 e B ≈ 0,0331, o que dá L ≈ 0,283. Sobre branco (L = 1), a razão é 1,05 ÷ 0,333 ≈ 3,15:1: passa para texto grande e componentes, mas falha para texto normal. Sobre preto (L = 0), a razão é 0,333 ÷ 0,05 ≈ 6,66:1, suficiente para AA em qualquer tamanho.
Erros comuns de contraste
Cinza claro sobre branco
É o erro mais frequente em sites “minimalistas”. #999999 sobre branco tem só 2,85:1. O cinza mais claro que ainda passa no AA para texto normal sobre branco é #767676 (4,54:1); #777777 já fica em 4,48:1 e falha. Para AAA, é preciso chegar a #595959 (7:1).
Texto sobre imagem
Uma foto tem áreas claras e escuras, e o contraste precisa funcionar na pior delas. Use o seletor de cor de imagem para capturar o pixel mais claro atrás de um texto branco e teste aqui. Se falhar, aplique uma camada escura semitransparente sobre a imagem ou coloque o texto sobre um fundo sólido.
Placeholder e texto de apoio
O texto de exemplo dentro de campos costuma ser um cinza bem claro. Se ele transmite informação, como o formato esperado de uma data, está sujeito aos mesmos 4,5:1. Melhor ainda: não use o placeholder como único rótulo do campo.
Estados de foco, hover e bordas
O contorno de foco e as bordas de campos são componentes visuais e precisam de 3:1 em relação às cores adjacentes pelo critério 1.4.11. A WCAG 2.2 acrescentou ainda o critério 2.4.13 (Aparência do foco, AAA), que trata do tamanho e do contraste do indicador de foco. Um hover que só muda levemente o tom também passa despercebido para muita gente.
Como corrigir uma combinação que não passa
Na maioria dos casos, a solução é mudar a luminosidade e manter o matiz: escureça o texto sobre fundos claros ou clareie-o sobre fundos escuros. Assim a cor continua reconhecível como parte da identidade visual. É exatamente o que a sugestão desta ferramenta faz: ela procura a cor de texto mais próxima da original, com o mesmo matiz, que atinge o nível AA ou AAA, e um botão aplica o ajuste na hora.
- Informe a cor do texto e a do fundo (o botão de inverter ajuda a testar a combinação ao contrário, como em modo escuro).
- Veja os selos e a prévia ao vivo.
- Se algum nível falhar, aplique a sugestão e confira se o resultado ainda combina com o restante da paleta.
- Copie o link da página: ele guarda as duas cores e pode ser enviado para a equipe revisar.
Contraste suficiente não resolve tudo. Evite comunicar informação apenas pela cor, como erro em vermelho e sucesso em verde sem ícone ou texto. O simulador de daltonismo mostra como sua paleta aparece para outras pessoas, e os guias de contraste e acessibilidade e de design para daltonismo trazem exemplos práticos.