🌗 Verificador de Contraste de Cores (WCAG AA / AAA)
Verifique instantaneamente se o par de cores de texto e fundo atende aos padrões de acessibilidade WCAG 2.x AA ou AAA — diretamente no seu navegador, gratuito, com nenhum dado jamais saindo do seu dispositivo. Escolha ou digite qualquer cor em formato hexadecimal, veja a proporção exata de contraste e receba claramente os selos de pass/fail para texto normal, texto grande e ambos os níveis de conformidade.
Privado por design. Esta ferramenta funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado, e funciona offline.
Sobre
A fórmula de proporção de contraste do WCAG (Web Content Accessibility Guidelines) calcula a luminância relativa de cada cor usando o padrão IEC 61966-2-1 sRGB, depois calcula quão mais clara uma cor é em comparação com a outra. Uma proporção de 4,5:1 ou superior atende à AA para texto normal (16 px), enquanto 7:1 ou superior atende à AAA. Texto grande (24 px ou 18,67 px em negrito) tem limites mais flexíveis: 3:1 para AA e 4,5:1 para AAA. Esta ferramenta executa todo o algoritmo WCAG 2.x totalmente no seu navegador — sem servidor, sem conta. Os resultados são armazenados localmente, então o último par de cores que você usou estará à sua espera quando você retornar.
Como usar
- Escolha a cor do seu texto usando o seletor de cores ou digite um código hexadecimal (ex: #1a2b3c) no campo Cor do Texto.
- Escolha a cor de fundo da mesma forma no campo Cor de Fundo. Use o botão Trocar para inverter rapidamente as duas cores.
- Leia a proporção de contraste exibida em texto grande e verifique os quatro selos de pass/fail: AA e AAA para texto normal e texto grande.
- Pré-visualize como o seu texto realmente fica no fundo escolhido na seção Pré-visualização em Tempo Real antes de finalizar seu design.
Perguntas frequentes
- Este verificador de contraste WCAG é gratuito para usar?
- Sim, totalmente gratuito sem cadastro, sem muro de pagamento e sem limites de uso. Abra a página e comece a verificar as cores imediatamente.
- Funciona offline ou sem conexão com a internet?
- Sim. Todos os cálculos são executados totalmente no seu navegador usando JavaScript. Depois que a página for carregada, você pode se desconectar da internet e a ferramenta continua funcionando. Nenhum dado é enviado para qualquer servidor.
- Meus dados de cor são privados? Algo é carregado?
- Suas cores nunca saem do seu navegador. Nenhuma análise sobre as cores que você insere, nenhum upload, nenhuma compartilhamento com terceiros. O último par de cores é salvo apenas no localStorage do seu navegador.
- Qual é a diferença entre WCAG AA e AAA?
- AA é o padrão mínimo exigido por mostas regulamentações (ex: ADA, EN 301 549). O texto normal precisa de uma proporção de 4,5:1; o texto grande (24 px ou negrito 18,67 px) precisa de 3:1. AAA é acessibilidade aprimorada: 7:1 para texto normal e 4,5:1 para texto grande. Alcance pelo menos AA em todos os designs de produção.
- Posso verificar cores usando o formato abreviado de 3 dígitos hexadecimal como #fff?
- Sim. A ferramenta aceita tanto o formato abreviado de 3 dígitos (#rgb) quanto o completo de 6 dígitos (#rrggbb). Basta digitar ou colar sua cor e o verificador a expande e a valida automaticamente.