Verificador de contraste WCAG
Teste qualquer par de cores de primeiro e segundo plano para a taxa de contraste WCAG 2.1 (1 a 21).
Como verificar o contraste da cor
1. Digite ou escolha as cores de primeiro plano (texto) e de fundo.
2. Leia a taxa de contraste (por exemplo, 4,52:1).
3. Verifique as linhas AA e AAA para normais e AAA tamanhos de texto grandes.
4. Ajuste a luminosidade do HSL até que o nível necessário seja aprovado e, em seguida, copie os valores hexadecimais.
Exemplos de verificação de contraste
Corpo do texto #374151 em #FFFFFF
Proporção ≈ 8,9:1 — passa AAA para texto normal (precisa de 7:1). Leitura confortável de formato longo.
Cinza claro #9CA3AF em branco
Proporção ≈ 2,6:1 — falha em AA para texto normal (precisa de 4,5:1). Erro comum de espaço reservado.
Botão principal branco em #2563EB
Proporção ≈ 4,6:1 — passa texto normal AA; aumente para azul mais escuro para uso AAA ou somente grande.
Quando usar esta ferramenta
• Quando você audita tokens do sistema de design antes do lançamento.
• Quando você corrige descobertas de acessibilidade do Lighthouse ou Axe.
• Quando você escolhe cores de link que devem diferir do corpo do texto, não apenas pelo matiz.
Níveis WCAG 2.1 explicados
O nível A é mínimo; AA é o alvo legal em muitas jurisdições (ADA, setor público EAA). AAA é uma aspiração para o texto do corpo - manchetes grandes podem passar por AAA mais facilmente do que legendas de 14px. Os indicadores visíveis de foco (2.4.7) complementam o contraste — os usuários de teclado precisam de anéis de foco visíveis, geralmente 3:1 em relação às cores adjacentes. Documente aprovação/reprovação em seu sistema de design ao lado de cada par de tokens.
Perguntas frequentes
Qual taxa de contraste para WCAG AA normal texto?
Pelo menos 4,5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt negrito).
O que para AAA?
7:1 texto normal, 4,5:1 texto grande - mais rigoroso, frequentemente usado para sites governamentais.
Os componentes da UI precisam contraste?
WCAG 2.1 requer 3:1 para objetos gráficos e limites de componentes de UI (1.4.11).
Como a proporção é calculada?
Com base na luminância relativa das cores sRGB: (L1 + 0,05) / (L2 + 0,05) onde L1 é mais claro.
O sublinhado corrige links de baixo contraste?
Não — o contraste ainda é necessário. Os sublinhados ajudam as dicas não coloridas, mas não substituem as regras de proporção.