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.
21.00:1
AA
Texto normal
AA
Texto grande
AAA
Texto normal
AAA
Texto grande
Pré-visualização
Um pequeno jabuti xereta viu dez cegonhas felizes.
Um pequeno jabuti xereta viu dez cegonhas felizes.
Como funciona
Esta ferramenta calcula o rácio de contraste entre duas cores segundo as diretrizes WCAG 2.1, e indica se a sua combinação de cores é acessível.
Como usar:
- Insira a cor do texto e a cor de fundo em hexadecimal, RGB ou usando o seletor de cores.
- A ferramenta mostra instantaneamente o rácio de contraste.
- Verifique se o resultado cumpre os níveis AA (4,5:1 para texto normal) ou AAA (7:1).
Exemplo: Texto preto (#000000) em fundo branco (#FFFFFF) → rácio de contraste 21:1 (AAA).
Limitações: A ferramenta avalia apenas o contraste texto/fundo. Não cobre todos os critérios de acessibilidade WCAG.
Privacidade: Nenhum dado é transmitido — tudo é calculado localmente.
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
Perguntas frequentes
- O que é o rácio de contraste WCAG?
- É um rácio calculado com base na luminância relativa das duas cores, variando de 1:1 (sem contraste) a 21:1 (contraste máximo).
- Qual é o valor mínimo para acessibilidade?
- 4,5:1 para texto normal (nível AA) e 3:1 para texto grande.
- O que significa o nível AAA?
- Um rácio de 7:1, recomendado para acessibilidade máxima.
- Posso testar várias combinações?
- Sim, altere as cores e o resultado atualiza em tempo real.
- A ferramenta suporta o formato HSL?
- A entrada aceita os formatos hexadecimal e RGB.