Verificador de contraste WCAG

1. Digite ou escolha as cores de primeiro plano (texto) e de fundo.

2. Leia a taxa de contraste (por exemplo, 4,52:1).

3. Verifique as linhas AA e AAA para normais e AAA tamanhos de texto grandes.

4. Ajuste a luminosidade do HSL até que o nível necessário seja aprovado e, em seguida, copie os valores hexadecimais.

• Quando você audita tokens do sistema de design antes do lançamento.

• Quando você corrige descobertas de acessibilidade do Lighthouse ou Axe.

• Quando você escolhe cores de link que devem diferir do corpo do texto, não apenas pelo matiz.

• Quando você precisar de auditoria de página inteira - use scanners automatizados no DOM renderizado.

• Ao testar fundos não sólidos (imagens, gradientes) - amostra de pixels do pior caso.

• Ao simular daltonismo - use simuladores de visão especializados.

O nível A é mínimo; AA é o alvo legal em muitas jurisdições (ADA, setor público EAA). AAA é uma aspiração para o texto do corpo - manchetes grandes podem passar por AAA mais facilmente do que legendas de 14px. Os indicadores visíveis de foco (2.4.7) complementam o contraste — os usuários de teclado precisam de anéis de foco visíveis, geralmente 3:1 em relação às cores adjacentes. Documente aprovação/reprovação em seu sistema de design ao lado de cada par de tokens.

Se a marca roxa falhar em branco, não troque a tonalidade - escureça o primeiro plano em etapas de claridade de 5 a 10% ou use roxo apenas para títulos grandes. O texto do espaço reservado deve atender ao contraste (4,5:1), não apenas aos valores de entrada. Os estados desativados podem estar isentos do contraste estrito do texto, mas não devem transmitir informações críticas apenas por cor. Emparelhe este verificador com o conversor de cores para iteração HSL rápida.