Verificador de Contraste WCAG
Verifique se as cores do seu site passam nos testes de acessibilidade WCAG 2.0 AA e AAA. Preview visual.
O que é Verificador de Contraste WCAG?
Verifique se a combinação de cores do seu texto atende aos critérios de contraste da WCAG, direto no navegador. O humberto.ai calcula a razão de contraste entre a cor do texto e a do fundo e mostra se passa nos níveis AA e AAA para texto normal e grande. Essencial para acessibilidade e para não perder leitores com baixa visão. Sem cadastro.
Como usar
- Escolha a cor do texto e a cor de fundo.
- A razão de contraste é calculada na hora.
- Veja se passa em AA e AAA para texto normal e grande.
- Ajuste as cores até atingir o nível desejado.
Perguntas frequentes
O que é razão de contraste?
É a diferença de luminância entre duas cores, expressa como uma razão de 1:1 (nenhum contraste) a 21:1 (preto sobre branco). Quanto maior, mais legível o texto sobre o fundo.
Qual razão a WCAG exige?
Para texto normal: 4.5:1 (nível AA) e 7:1 (AAA). Para texto grande (a partir de ~18pt, ou 14pt em negrito): 3:1 (AA) e 4.5:1 (AAA). A ferramenta mostra o resultado para cada caso.
Qual a diferença entre nível AA e AAA?
AA é o padrão mínimo recomendado e exigido pela maioria das leis de acessibilidade. AAA é mais rigoroso, indicado para conteúdo crítico. Mirar AA já garante boa legibilidade para a maioria dos usuários.
O que conta como 'texto grande'?
Texto a partir de aproximadamente 18pt (24px) normal, ou 14pt (~18.7px) em negrito. Como é maior e mais legível, a WCAG permite um contraste um pouco menor (3:1 no AA).
Contraste vale só para texto?
Principalmente, mas componentes de interface (bordas de campos, ícones, estados de foco) também têm um mínimo de 3:1 na WCAG 2.1. Garantir bom contraste ajuda todos, não só quem tem baixa visão.