Verificador de Contraste (WCAG)
Escolha a cor do texto e a cor do fundo para ver o contraste entre elas e se atendem aos níveis AA e AAA do WCAG.
Texto grande de exemplo
Este é um texto normal de exemplo para avaliar a legibilidade.
AA: aprovado
AAA: aprovado
AA: aprovado
AAA: aprovado
Não acredita? Desligue sua internet e teste — continua funcionando.
Como funciona
O contraste é calculado seguindo a fórmula oficial do WCAG 2.x, a partir da luminância relativa de cada cor. O resultado é uma proporção de 1:1 (sem contraste algum) a 21:1 (preto sobre branco, o máximo). As diretrizes de acessibilidade exigem contrastes mínimos diferentes para texto normal e texto grande (a partir de 18pt, ou 14pt em negrito), e definem dois níveis de conformidade: AA (mínimo recomendado) e AAA (mais rigoroso). Para ter uma noção dos números: preto sobre branco dá 21:1; o cinza #767676 sobre branco dá cerca de 4,5:1 (o cinza mais claro que ainda passa no AA para texto normal); e um cinza claro #999999 sobre branco dá só 2,85:1, abaixo do mínimo. Se a ferramenta indica reprovação, escureça o texto (ou clareie o fundo) até a proporção subir. O mesmo cálculo vale para ícones e bordas de campos: o WCAG 2.1 pede 3:1 para componentes de interface e gráficos necessários para entender o conteúdo.