♿

verificador contraste WCAG

Verifique a taxa de contraste de cores para conformidade de acessibilidade WCAG AA e AAA.

Ferramentas de design Executa localmente Nenhum dado enviado
WCAG AA / AAA acessibilidade cor
Cor do primeiro plano
Cor do plano de fundo
Pré-visualizar
Texto normal — A rápida raposa marrom salta sobre o cão preguiçoso.
Texto grande (24px normal)
Texto grande (18.67px negrito)
Componente de interface
—
Taxa de contraste
Nível Texto normal Texto grande Componentes de UI
AA — — —
AAA — — N/A
WCAG 2.1 — AA exige ≥ 4,5:1 para texto normal, ≥ 3:1 para texto grande e componentes de UI. AAA exige ≥ 7:1 para texto normal, ≥ 4,5:1 para texto grande. Texto grande = 18pt (24px) normal ou 14pt negrito (18,67px).

O que é o Verificador de Contraste?

Verifique a taxa de contraste de cores para conformidade de acessibilidade WCAG AA e AAA. Verifique instantaneamente combinações de cores de primeiro plano e plano de fundo para texto normal, texto grande e componentes de interface.

Como usar o Verificador de Contraste

  1. Digite ou selecione a cor do texto em primeiro plano.
  2. Digite ou selecione a cor de fundo por trás dele.
  3. Confira instantaneamente a taxa de contraste e o resultado de aprovação ou reprovação no WCAG.
  4. Ajuste qualquer uma das cores até a combinação atender ao seu objetivo de acessibilidade.

Ferramentas relacionadas

🎨
seletor de cor
Converta cores entre HEX, RGB, HSL e CMYK
 🌈
gerador gradiente CSS
Crie gradientes lineares e radiais em CSS com pré-visualização ao vivo
 🎨
gerador paleta cores
Gere paletas de cores complementares, análogas e triádicas
Entenda o contraste de cores ▾
Exemplo
Entrada Verificando texto cinza médio sobre fundo branco:
Saída Resultado: passa no AA para texto grande (≥ 3:1), mas falha no AA para texto normal (requer 4,5:1). Escureça um pouco o cinza para passar em todos os níveis AA.
Casos de uso comuns
  • Verifique o contraste de botões e links antes de publicar atualizações de UI
  • Valide cores de texto em sistemas de marca e guias de estilo
  • Revise gráficos de marketing para verificar a legibilidade
  • Teste rapidamente combinações de escuro sobre claro e claro sobre escuro
Perguntas frequentes
Qual é a diferença entre os níveis de contraste AA e AAA?

O WCAG AA exige uma proporção de 4,5:1 para texto normal e 3:1 para texto grande — o requisito legal padrão. O AAA exige 7:1 para texto normal e 4,5:1 para texto grande, proporcionando acessibilidade aprimorada para usuários com baixa visão severa.

Esta verificação considera contraste de elementos não textuais (ícones, bordas)?

Sim — o WCAG 1.4.11 (Non-text Contrast) exige 3:1 para componentes de UI e elementos gráficos. O resultado AA UI Components na tabela cobre esse requisito.

Minhas cores passam no AA, mas falham no AAA — preciso corrigi-las?

Conformidade com AAA não é exigida para todo conteúdo. O WCAG AA é o requisito legal padrão na maioria das jurisdições. Busque AAA quando possível, mas o AA é suficiente para conformidade legal.

O que é considerado texto grande?

O WCAG define texto grande como 18pt (24px) ou maior para peso normal, ou 14pt (aproximadamente 18,67px) ou maior para texto em negrito. Texto grande tem um requisito de contraste menor (3:1 para AA) porque é inerentemente mais fácil de ler.