🛝Toolio
Sobre Contato

🌗 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.

Cor do texto
Cor de fundo
Resultados do Contraste
proporção de contraste
Pré-visualização em Tempo Real

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

  1. Escolha a cor do seu texto usando o seletor de cores ou digite um código hexadecimal (ex: #1a2b3c) no campo Cor do Texto.
  2. Escolha a cor de fundo da mesma forma no campo Cor de Fundo. Use o botão Trocar para inverter rapidamente as duas cores.
  3. 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.
  4. 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.