Verificador de contraste
Verifique o contraste para WCAG
Como usar Verificador de contraste
Verifique o contraste para WCAG Ferramenta gratuita online, sem registo, sem anúncios intrusivos. Use agora.
Por que o contraste de cores importa?
Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de deficiência na visão de cores. Além disso, as pessoas leem em condições difíceis — luz solar intensa, telas de baixa qualidade, cansaço ou olhos envelhecidos. Contraste de cor suficiente garante que seu conteúdo seja legível para todos os usuários, independentemente de suas condições visuais.
- Conformidade com acessibilidade web: As WCAG 2.1 (Diretrizes de Acessibilidade para Conteúdo Web) estabelecem razões mínimas de contraste. No Brasil, a Lei Brasileira de Inclusão (LBI) e o e-MAG (Modelo de Acessibilidade em Governo Eletrônico) exigem conformidade com padrões de acessibilidade para sites governamentais — e muitas empresas privadas adotam os mesmos padrões.
- Revisão de design: Verifique as combinações de cores de texto e fundo durante a fase de design, antes do desenvolvimento. É muito mais barato corrigir problemas de contraste no Figma do que após o lançamento.
- Bibliotecas de componentes: Verifique se cada combinação de cores em seu sistema de design — texto sobre cor primária, texto sobre cor secundária, estados desabilitados — atende aos requisitos de acessibilidade para todos os contextos de uso.
- Modo escuro: Ao implementar o modo escuro, cores que funcionavam em fundos brancos frequentemente falham em fundos escuros. Cada modo precisa de verificação de contraste independente — não assuma que o que funciona no claro funciona no escuro.
- Visualização de dados: Certifique-se de que as cores dos gráficos são distinguíveis por usuários daltônicos e legíveis em diferentes cores de fundo — especialmente importante em dashboards e relatórios corporativos.
Níveis WCAG: Nível A é o mínimo absoluto. Nível AA (razão ≥ 4,5:1 para texto normal, ≥ 3:1 para texto grande) é o padrão legal na maioria das jurisdições. Nível AAA (razão ≥ 7:1) é para a maior acessibilidade — exigido em alguns sites governamentais e de saúde.
Frequently Asked Questions
Qual razão de contraste é exigida pelo WCAG AA?
O WCAG AA exige uma razão mínima de contraste de 4,5:1 para texto normal (abaixo de 18pt ou 14pt em negrito) e 3:1 para texto grande (18pt ou maior, ou 14pt em negrito ou maior). Componentes de UI e elementos gráficos (ícones, bordas de formulário) requerem 3:1. Esses são mínimos — maior contraste é sempre melhor para a legibilidade geral.
Como a razão de contraste é calculada?
Razão de contraste = (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 é a mais escura. A luminância é calculada a partir dos valores RGB lineares usando uma fórmula específica. O contraste máximo é 21:1 (preto sobre branco). Uma razão de 1:1 significa sem contraste — cores idênticas.
A razão de contraste se aplica ao texto colorido sobre fundos coloridos?
Sim — a fórmula WCAG compara a luminância relativa, não apenas o brilho percebido. Texto vermelho sobre fundo verde pode ter baixo contraste mesmo que ambas sejam cores vivas. Sempre teste combinações de cores reais — não confie na intuição visual, pois a luminância percebida pode enganar.
Qual é a diferença entre contraste de cor e daltonismo?
A razão de contraste mede a diferença de luminância — importa para todos os usuários, incluindo aqueles com visão normal de cores (especialmente em luz forte ou telas de baixa qualidade). O daltonismo afeta como as cores são distinguidas, não necessariamente sua luminância. Um design de alto contraste usando apenas vermelho e verde passa no teste de luminância, mas pode ser indistinguível para usuários com daltonismo vermelho-verde — ambos os problemas precisam ser abordados.
O peso da fonte afeta os requisitos de contraste?
Sim. Texto em negrito e texto grande têm requisitos mínimos mais baixos porque são inerentemente mais fáceis de ler. O WCAG AA exige 3:1 para texto de 18pt (24px) ou maior, ou 14pt (aproximadamente 18,67px) em negrito. Para texto menor ou sem negrito, o requisito é 4,5:1.
Verificador de contraste vs simulador de daltonismo vs auditoria de acessibilidade
Um verificador de contraste verifica a razão de luminância entre duas cores específicas. Um simulador de daltonismo (Coblis, DevTools do Chrome) mostra como um design aparece com diferentes tipos de deficiência de visão de cores. Uma auditoria de acessibilidade completa (axe, Lighthouse, WAVE) verifica uma página inteira em busca de todas as violações WCAG — contraste, texto alternativo ausente em imagens, navegação por teclado, rótulos ARIA. Para acessibilidade abrangente: verifique o contraste na fase de design, simule o daltonismo antes do lançamento e execute auditorias automatizadas no site em produção.