Verificador de Contraste de Cor

Como funciona

Escolha uma cor de primeiro plano e de fundo usando os seletores ou digite valores hex diretamente. A ferramenta calcula a luminância relativa de cada cor usando a fórmula WCAG 2.1 — uma soma ponderada dos canais sRGB após decodificação gama — e divide a luminância mais clara pela mais escura (mais 0,05 no numerador e denominador para evitar divisão por zero com preto puro). A razão de contraste resultante vai de 1:1 (cores idênticas) a 21:1 (preto puro em branco puro). Quatro badges WCAG mostram pass ou fail: AA para texto normal (≥ 4,5:1), AA para texto grande (≥ 3:1), AAA para texto normal (≥ 7:1) e AAA para texto grande (≥ 4,5:1). Um painel de pré-visualização ao vivo mostra frases de exemplo em texto normal e grande para verificação visual. O cálculo ocorre inteiramente no navegador sem chamadas ao servidor, e cada mudança de cor atualiza a razão e a pré-visualização instantaneamente.

Casos de uso

• Verificar uma paleta de cores da marca quanto à conformidade de acessibilidade antes de lançar um redesign
• Escolher cores de botões e links que permaneçam legíveis em tema claro ou escuro
• Cumprir os requisitos WCAG 2.1 AA ou AAA para conformidade com Section 508, EN 301 549 ou ADA
• Revisar um mockup enviado por um designer para sinalizar texto ilegível antes do desenvolvimento
• Ensinar conceitos de acessibilidade mostrando como pequenas diferenças de luminância causam grandes falhas de contraste