Verificador de contraste WCAG
Escolha a cor do texto e a cor do fundo para calcular a taxa de contraste segundo as diretrizes de acessibilidade WCAG. A ferramenta mostra a razão exata, indica se a combinação passa nos níveis AA e AAA e exibe um preview ao vivo do texto sobre o fundo.
O que é a taxa de contraste
A taxa de contraste compara a luminosidade relativa de duas cores e vai de 1:1 (sem contraste) até 21:1 (preto sobre branco). É calculada pela fórmula:
contraste = (L1 + 0,05) / (L2 + 0,05)Onde L1 é a luminosidade da cor mais clara e L2 a da mais escura. A luminosidade relativa de cada cor é obtida convertendo os canais sRGB para o espaço linear e aplicando os pesos 0.2126 R + 0.7152 G + 0.0722 B.
Níveis WCAG
| Nível | Texto normal | Texto grande |
|---|---|---|
| AA (mínimo) | 4,5:1 | 3:1 |
| AAA (aprimorado) | 7:1 | 4,5:1 |
Esses limites são os dos critérios de sucesso 1.4.3 (Contraste mínimo, AA) e 1.4.6 (Contraste aprimorado, AAA) da WCAG 2.2, a versão atual da recomendação do W3C (publicada em 2023), e são os mesmos da WCAG 2.0 e 2.1.
Texto grande é definido como 18pt (≈24px) ou 14pt (≈18,66px) em negrito ou maior. Para a maioria dos sites, o alvo é o nível AA com texto normal (4,5:1).
Por que o contraste importa
Bom contraste garante que pessoas com baixa visão, daltonismo ou usando telas em ambientes muito claros consigam ler seu conteúdo. Além de inclusivo, é um requisito legal de acessibilidade em muitos contextos e melhora a usabilidade para todos.
Dicas para melhorar o contraste
- Escureça o texto ou clareie o fundo (ou vice-versa).
- Evite texto cinza-claro sobre fundo branco.
- Não dependa apenas da cor para transmitir informação.
- Teste também os estados de hover, links e placeholders.
Perguntas frequentes
Qual a taxa de contraste mínima recomendada?
Para texto normal, o mínimo WCAG AA é 4,5:1. Para texto grande, 3:1. Sempre que possível, busque o nível AAA (7:1) para máxima legibilidade.
O que conta como “texto grande”?
Texto a partir de 24px (18pt) normal, ou 18,66px (14pt) em negrito. Para esses tamanhos, o requisito de contraste é menor.
O contraste muda com transparência?
Sim. Se houver opacidade, a cor efetiva sobre o fundo é diferente. Este verificador considera cores sólidas (HEX); para cores com alpha, calcule primeiro a cor resultante sobre o fundo.