Como usar: Verificador de contraste
- 1
Informe duas cores
Digite a cor do texto e a cor do fundo em HEX, rgb(), hsl() ou oklch(), ou abra a amostra redonda para escolher uma.
- 2
Leia o veredito
A proporção e cinco linhas de Aprovado ou Reprovado mostram AA e AAA para texto normal e texto grande, além da regra de 3:1 para ícones e bordas.
- 3
Aplique uma correção
Se algum nível for reprovado, use o texto ou o fundo mais escuro ou mais claro mais próximo que seja aprovado e copie o novo valor.
Limites e Pro
Grátis e sem limites: quantas verificações quiser, 5 critérios do WCAG 2.2 por par, 2 correções sugeridas por nível reprovado e uma grade com até 7 cores.
Sobre: Verificador de contraste
Este verificador de contraste mede a distância de brilho entre duas cores usando a fórmula de luminância relativa do WCAG 2.2, o mesmo cálculo das auditorias de acessibilidade dos navegadores e dos plugins de design. O resultado é uma proporção entre 1:1 (cores idênticas) e 21:1 (preto sobre branco). O critério de sucesso 1.4.3 pede 4,5:1 para texto de corpo e 3:1 para texto grande no nível AA; o 1.4.6 eleva esses valores para 7:1 e 4,5:1 no AAA; o 1.4.11 pede 3:1 para elementos significativos que não são texto, como anéis de foco, contornos de campos e linhas de gráficos.
Uma amostra ao vivo mostra os dois tamanhos de texto, um botão com contorno e um ícone nas suas cores, para você avaliar a legibilidade e não só o número. As proporções são truncadas em duas casas decimais, e não arredondadas, porque um par com 4,496:1 não atende a um requisito de 4,5:1. Quando um nível é reprovado, o verificador busca na luminosidade OKLCH de uma das cores, mantendo matiz e croma, e propõe o valor mais próximo que seja aprovado, para o texto e para o fundo separadamente.
O verificador serve para cores sólidas. Ele não avalia texto sobre fotos ou gradientes, transparência, a renderização do peso da fonte em uma tela específica nem o método APCA, mais recente, proposto para o WCAG 3. Por isso, trate a aprovação como o mínimo e teste também em telas reais.
Privacidade
As duas cores ficam nesta aba: a proporção, as verificações de Aprovado e Reprovado e as correções sugeridas são calculadas pelo seu navegador, e nenhum valor de cor é enviado a um servidor nem armazenado.