Verificador de Contraste de Cor
Insira uma cor de primeiro plano e de fundo para verificar a razão de contraste WCAG com badges AA e AAA para texto normal e grande.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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