Guia do Verificador de Contraste WCAG: Requisitos AA/AAA e Como Corrigir Falhas
Aprenda os requisitos de contraste WCAG 2.1, como calcular taxas de contraste, falhas comuns e correções práticas para texto, componentes UI e paletas de cores completas.
O contraste de cores é a falha de acessibilidade mais comum na web. De acordo com a análise anual de acessibilidade da WebAIM, o baixo contraste afeta mais de 80% das páginas iniciais. No entanto, também é um dos problemas mais fáceis de corrigir — se você conhece as regras e tem as ferramentas certas. Este guia explica os requisitos de contraste WCAG, como funcionam as taxas de contraste e como corrigir falhas sem redesenhar toda a sua paleta.
O que é contraste de cor e por que é importante?
O contraste de cor é a diferença de luminância (brilho percebido) entre o texto e seu fundo. Alto contraste torna o texto legível para todos — incluindo usuários com baixa visão, daltonismo ou visualizando telas sob luz solar intensa.
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1 definem taxas mínimas de contraste para garantir legibilidade. Atender a esses padrões não é apenas boa prática — é legalmente exigido sob a Lei dos Americanos com Deficiências (ADA), Seção 508 e leis similares em todo o mundo.
Requisitos de contraste WCAG
WCAG define dois níveis de conformidade para contraste:
Nível AA (padrão mínimo)
Texto normal (abaixo de 18pt ou abaixo de 14pt negrito): Taxa mínima 4.5:1
Texto grande (18pt+ ou 14pt+ negrito): Taxa mínima 3:1
Componentes UI e objetos gráficos: Taxa mínima 3:1 (adição WCAG 2.1)
Nível AAA (padrão aprimorado)
Texto normal: 7:1 mínimo
Texto grande: 4.5:1 mínimo
A maioria das organizações visa o Nível AA como base. AAA é recomendado para aplicações com muito texto e produtos que atendem usuários com deficiência visual.
Como as taxas de contraste são calculadas
A taxa de contraste é a luminância relativa da cor mais clara dividida pela luminância da cor mais escura, expressa como uma taxa de 1:1 (sem contraste) a 21:1 (preto sobre branco).
Você não precisa calcular isso manualmente. Use nosso Verificador de Contraste WCAG para testar múltiplos pares de cores instantaneamente.
Exemplos
| Texto | Fundo | Taxa | AA Normal | AA Grande | AAA Normal |
|---|---|---|---|---|---|
#000000 |
#FFFFFF |
21:1 | ✅ Passa | ✅ Passa | ✅ Passa |
#767676 |
#FFFFFF |
4.54:1 | ✅ Passa | ✅ Passa | ❌ Falha |
#3B82F6 |
#FFFFFF |
3.15:1 | ❌ Falha | ✅ Passa | ❌ Falha |
#1E40AF |
#FFFFFF |
7.04:1 | ✅ Passa | ✅ Passa | ✅ Passa |
Falhas comuns e soluções
Texto cinza claro sobre branco
Falha: color: #999999 sobre branco = 2.85:1 — Falha AA.
Solução: Escurecer para #767676 (4.54:1) para AA ou #595959 (7.0:1) para AAA.
Cores de marca sobre branco
Falha: color: #3B82F6 (Tailwind blue-500) sobre branco = 3.15:1 — Falha AA texto normal.
Solução: Usar apenas para texto grande, ou escurecer para #1E40AF (blue-700, 7.04:1) para texto do corpo.
Use o Verificador de Contraste em Lote para testar toda a sua paleta em segundos.