Verificador de contraste de cores
Verifique se as cores de texto e fundo atendem aos requisitos de contraste WCAG e, se não, receba a cor acessível mais próxima.
Exemplo de texto grande
Exemplo de texto normal, como a maior parte da sua página.
Taxa de contraste
4.83:1
- WCAG AA, texto normal (4.5:1) Aprovado
- WCAG AA, texto grande (3:1) Aprovado
- WCAG AA, componentes e ícones (3:1) Aprovado
- WCAG AAA, texto normal (7:1) Reprovado
- WCAG AAA, texto grande (4.5:1) Aprovado
O que o verificador mostra
Tudo o que você precisa para escolher cores legíveis.
Razão de contraste
A razão WCAG exata entre suas duas cores.
Resultados AA e AAA
Texto normal, texto grande e componentes de interface frente aos limites WCAG.
Prévia ao vivo
Veja suas cores em um texto de exemplo enquanto ajusta.
Sugestão acessível
O tom mais próximo da sua cor de texto que atinge AA.
Como funciona
Escolha duas cores
Use o seletor ou digite valores hex ou RGB.
Leia o resultado
A razão e a aprovação ou reprovação em cada nível WCAG atualizam na hora.
Aplique a correção
Use a cor sugerida se seu par não passar.
Contraste é um dos muitos requisitos WCAG. Faça uma auditoria de acessibilidade completa para verificar a página inteira.
Perguntas
WCAG AA pede 4,5:1 para texto normal e 3:1 para texto grande e componentes de interface. AAA pede 7:1 e 4,5:1.
Pelo menos 24 px normal ou cerca de 18,7 px em negrito (18 pt ou 14 pt negrito).
Não, verifica um par de cores. A auditoria de acessibilidade verifica o contraste em uma página ao vivo.
Relacionados
Verifique a acessibilidade da página inteira
Achados mapeados para WCAG, incluindo contraste, em uma auditoria gratuita do seu site ao vivo.
Executar auditoria grátis