Verificador de Contraste de Cores
Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
Atualizado em maio de 2026
Good color contrast ensures text is readable for all users, including those with low vision or color blindness. Aim for WCAG 2.2 AA compliance to meet legal accessibility standards.
Accessibility Fix
Your colors pass AA!
No fix needed for normal text contrast.
Color Blindness Simulation
WCAG 2.2 Reference
| Metric | Current Value | Threshold | Status |
|---|---|---|---|
| Normal Text (AA) | 6.18:1 | 4.5:1 | PASS |
| Normal Text (AAA) | 6.18:1 | 7:1 | FAIL |
| Large Text (AA) | 6.18:1 | 3:1 | PASS |
| Large Text (AAA) | 6.18:1 | 4.5:1 | PASS |
| UI Components (AA) | 6.18:1 | 3:1 | PASS |
Como usar
Duas cores, conformidade instantânea
1. Defina texto e fundo
Clique no swatch ou digite o código HEX de 6 dígitos. "Swap Colors" inverte instantaneamente.
2. Leia a conformidade
Razão de contraste e status AA/AAA para texto normal, texto grande e componentes de UI.
3. Corrija ou simule daltonismo
"Accessibility Fix" sugere a cor aprovada mais próxima; simule Deuteranopia, Protanopia e mais.
O que esta ferramenta faz
Além de calcular a razão de contraste
Sugestão automática de correção
Encontra a cor aprovada mais próxima preservando o tom original.
Simulação de 5 tipos de daltonismo
Deuteranopia, Protanopia, Tritanopia e Acromatopsia, além da visão normal.
Preview de texto ao vivo
Veja como a combinação fica em texto normal, grande e componentes de UI.
100% no navegador
Nenhuma cor é enviada a servidor — seguro para paletas de marca não lançadas.
Copiar razão com atalho de teclado
Pressione Shift+Enter em qualquer lugar da página para copiar a razão de contraste atual — útil para colar direto em relatórios de auditoria.
Referências de contraste
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Revisão de design web e mobile
Verifique texto, botões e campos antes de publicar — evita correções custosas depois.
Auditorias de conformidade legal
LBI, EAA e WCAG — a tabela de referência mostra cada métrica com seu limiar.
Verificação de dark mode
As mesmas razões WCAG se aplicam — confirme fundo escuro e texto claro.
Acessibilidade de cores de marca
Veja se a cor de marca funciona como texto ou UI, e ache a alternativa mais próxima que passa.
Segurança para usuários daltônicos
Confirme que uma combinação aprovada em luminância ainda é distinguível — rode as simulações de Deuteranopia e Protanopia antes de aprovar o design final.
Erro comum? Comece por aqui
Confiar na diferença visual, não no número
Cores visualmente distintas podem ter luminância quase idêntica e reprovar — sempre verifique numericamente.
Ignorar daltonismo mesmo passando no WCAG
O WCAG mede luminância, não distinção de cores — vermelho/verde pode passar e ainda ser indistinguível.
Não considerar o tamanho do texto
Texto grande (18pt+) precisa de só 3:1 em vez de 4,5:1 — aumentar a fonte dá mais flexibilidade de cor.
Usar o limiar de Componentes de UI para texto
Componentes de UI exigem só 3:1 e não têm nível AAA — aplicar essa régua a texto normal, que exige 4,5:1, aprova por engano um texto que reprova na prática.
Achar que a correção sugerida também passa em AAA
O painel "Accessibility Fix" mira o mínimo de AA (4,5:1), não AAA (7:1) — se seu projeto exige AAA, confira a razão sugerida na tabela antes de aplicar.
Por que usar esta ferramenta
O contraste inadequado é a violação de acessibilidade mais comum na web, afetando 83,6% dos sites (WebAIM Million 2024). Com a LBI e o EAA em vigor, verificar contraste não é mais opcional.
A sugestão automática de correção e a simulação de daltonismo vão além do simples cálculo de razão — mostram exatamente como resolver uma falha e revelam problemas que o número sozinho não captura.
No Brasil, a LBI (Lei 13.146/2015) exige acessibilidade digital com o WCAG como referência técnica, e quem também atende a União Europeia segue o European Accessibility Act desde 2025 — verificar contraste deixou de ser só boa prática e virou parte do compliance legal.
Requisitos WCAG 2.2
AA (mínimo legal) vs. AAA (aprimorado)
Perguntas frequentes
Calcula a razão de contraste entre duas cores — tipicamente texto e fundo — e determina se atende aos padrões WCAG. Também simula daltonismo e sugere alternativas acessíveis.
Referências
Ferramentas Relacionadas
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
- Gerador de Paleta de Cores Design Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
- Gerador de Paleta de Cores por Imagem Design Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
- Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Gerador CSS box shadow grátis com preview em tempo real. Crie sombras, efeitos neumorfismo e glassmorfismo. Exporte para CSS, Tailwind ou variáveis CSS.
- Gerador CSS Flexbox Design Gerador CSS Flexbox grátis: preview ao vivo, saída Tailwind + CSS simultânea, 10 presets prontos, avisos contextuais e exportação React/JSX. Sem cadastro.
