Verificador de Contraste de Cores — WCAG 2.2 AA e AAA Grátis
Insira uma cor de primeiro plano (texto) e uma cor de fundo para calcular instantaneamente a razão de contraste e verificar se a combinação passa no WCAG 2.2 Nível AA e AAA. Sem cadastro, sem upload — tudo roda no seu browser.
O contraste de cores inadequado é a violação de acessibilidade mais comum na web, afetando 83,6% de todos os sites (WebAIM Million 2024). Com o European Accessibility Act (EAA) em vigor desde 28 de junho de 2025 e a Lei Brasileira de Inclusão (LBI — Lei 13.146/2015) exigindo acessibilidade digital, verificar o contraste de cores (color contrast checker) não é mais opcional — é compliance. Esta ferramenta oferece verificação instantânea, preview de texto ao vivo, simulação de daltonismo e sugestão automática de cores acessíveis quando você reprova.
Como Usar o Verificador de Contraste de Cores
Escolha as duas cores e leia os resultados.
- Defina a cor de primeiro plano (texto) — clique no swatch de cor para abrir o seletor nativo, ou digite qualquer código HEX de 6 dígitos diretamente no campo.
- Defina a cor de fundo — mesmo processo para o background. Clique em "Swap Colors" para inverter as cores instantaneamente.
- Leia os resultados de conformidade — o painel escuro mostra sua razão de contraste e o status AA/AAA para texto normal, texto grande e componentes de UI.
- Obtenha sugestões se reprovar — o painel "Accessibility Fix" recomenda a cor aprovada mais próxima, preservando o tom original.
- Simule daltonismo — alterne entre Normal, Deuteranopia, Protanopia, Tritanopia e Acromatopsia para ver como suas cores aparecem para pessoas com diferentes tipos de visão.
Requisitos de Contraste WCAG 2.2
O WCAG (Web Content Accessibility Guidelines) define requisitos de contraste com base no tamanho e propósito do texto:
| Nível | Texto normal | Texto grande (≥18pt ou ≥14pt negrito) | Componentes UI |
|---|---|---|---|
| AA (mínimo) | 4,5:1 | 3:1 | 3:1 |
| AAA (aprimorado) | 7:1 | 4,5:1 | N/A |
| Reprovado | < 4,5:1 | < 3:1 | < 3:1 |
Referências: Preto sobre branco (#000 / #FFF) é 21:1 — o máximo possível. O cinza médio #767676 sobre branco é exatamente 4,54:1, passando AA por margem mínima. O cinza claro #999999 sobre branco é 2,85:1 — um caso de falha muito comum em designs com texto secundário.
O Nível AA é o mínimo legal exigido pelo EAA (UE), ADA (EUA), Section 508 e pela LBI (Brasil). O Nível AAA é o padrão aprimorado recomendado para conteúdo crítico como mensagens de erro, textos legais e instruções.
Casos de Uso Comuns
- Revisão de design web e mobile: Verifique se texto, botões, links e campos de formulário atendem ao AA antes de publicar. Encontrar falhas de contraste no design evita correções custosas depois.
- Auditorias de conformidade legal: Use a ferramenta em auditorias de acessibilidade para LBI, EAA e WCAG. A tabela de referência mostra cada métrica com seu limiar de aprovação/reprovação.
- Verificação de dark mode: Insira suas cores de fundo e texto do dark mode para confirmar que os mesmos padrões de contraste se aplicam — as razões WCAG são idênticas para temas claros e escuros.
- Acessibilidade de cores de marca: Verifique se suas cores de marca funcionam como texto ou elementos de UI, e use a sugestão acessível para encontrar a alternativa mais próxima que passa no teste.
- Segurança para daltonismo: Use a simulação para confirmar que uma combinação que passa no contraste de luminância ainda é distinguível para usuários com deuteranopia (confusão vermelho-verde).
Perguntas Frequentes
O que é um verificador de contraste de cores?
É uma ferramenta gratuita que calcula a razão de contraste entre duas cores — tipicamente texto (primeiro plano) e seu fundo — e determina se a combinação atende aos padrões de acessibilidade WCAG. Ajuda designers e desenvolvedores a garantir que o conteúdo seja legível para usuários com baixa visão, daltonismo ou que usam telas em condições de iluminação difíceis. Esta ferramenta também simula daltonismo e sugere alternativas acessíveis quando uma combinação reprova.
Qual é o requisito de contraste do WCAG?
O WCAG 2.2 Nível AA exige razão de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt+ negrito). O Nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande. Componentes de UI como botões, bordas de formulários e ícones devem atender ao mínimo de 3:1 no Nível AA. Esses limiares se aplicam igualmente a combinações claro-sobre-escuro e escuro-sobre-claro.
Qual a diferença entre WCAG AA e AAA?
O Nível AA é o padrão legal exigido pela maioria das regulamentações de acessibilidade, incluindo ADA (EUA), EAA (UE), Section 508 e LBI (Brasil). Exige 4,5:1 para texto normal. O Nível AAA exige 7:1 para texto normal — oferece melhor legibilidade para usuários com deficiências visuais mais graves. A maioria das organizações mira em AA; AAA é aspiracional para conteúdo crítico.
Posso reprovar no contraste mesmo que as cores pareçam diferentes?
Sim. O contraste WCAG é baseado em luminância relativa (brilho percebido), não em matiz. Duas cores visualmente distintas — como azul brilhante e verde brilhante — podem ter valores de luminância quase idênticos e reprovar. Isso é especialmente comum com cores de saturação média e é um dos erros de design mais frequentes. Sempre verifique numericamente, não visualmente.
O que é daltonismo e por que importa para o contraste de cores?
Daltonismo afeta a percepção de cores. Os tipos mais comuns são deuteranopia (~6% dos homens) e protanopia (~1% dos homens), ambos envolvendo confusão vermelho-verde. O WCAG mede contraste de luminância, não distinção de cores — uma combinação vermelho/verde pode passar no WCAG mas ainda ser indistinguível para daltônicos. A simulação de daltonismo revela essa lacuna que o teste de contraste padrão não detecta.
Como corrigir uma cor que reprova no contraste?
As correções mais simples: (1) escurecer a cor do texto (diminuir Luminosidade no HSL), (2) clarear o fundo, ou (3) ambos. Use o painel "Accessibility Fix" — ele encontra a alternativa aprovada mais próxima preservando o matiz original. Aumentar o tamanho da fonte para 18pt+ também reduz a razão exigida de 4,5:1 para 3:1, dando mais flexibilidade para cores de marca.
Existe verificador de contraste para dark mode?
Sim — esta ferramenta funciona identicamente para dark mode. Insira a cor de fundo escura como background e a cor de texto clara como foreground. As mesmas razões WCAG se aplicam, independente de qual cor é mais clara. Designs em dark mode frequentemente usam texto off-white sobre cinza escuro — verifique se a combinação passa em 4,5:1.
Qual o impacto legal no Brasil para contraste de cores?
A Lei Brasileira de Inclusão (LBI — Lei 13.146/2015, Art. 63) exige que sites e aplicativos de empresas que oferecem serviços ao público sejam acessíveis, com o WCAG como referência técnica padrão. A NBR 17060 (acessibilidade digital) está sendo finalizada. Empresas que também operam na UE estão sujeitas ao European Accessibility Act (EAA) desde junho de 2025. O color contrast checker e o wcag contrast checker são ferramentas essenciais nesses processos de conformidade.
Ferramentas Relacionadas
- Seletor de Cor — Escolha, ajuste e converta cores para HEX, RGB, HSL e CMYK. Use para encontrar cores acessíveis antes de verificar o contraste aqui.
- Gerador de Paleta de Cores — Extraia paletas de cores de imagens e exporte para CSS, Tailwind ou JSON. Combine com este verificador para confirmar que as cores extraídas atendem aos padrões de acessibilidade.
Recursos
- WebAIM Contrast Checker — webaim.org — A referência original para verificação de contraste WCAG e benchmark do setor.
- WCAG 2.2 SC 1.4.3 — w3.org — Documentação oficial do W3C para o critério de Contraste (Mínimo), com todas as definições e exceções.
- WebAIM Million 2024 — webaim.org — Análise anual de acessibilidade dos 1 milhão de sites mais acessados, com contraste de cores como falha #1.
