Contraste de cor WCAG: guia prático de acessibilidade
Aprenda o que são as relações de contraste WCAG, por que importam e como verificá-las para um design acessível.
O que é contraste de cor WCAG e por que importa?
As WCAG (Web Content Accessibility Guidelines) definem a relação de contraste mínima entre o texto e seu fundo considerada acessível. As diretrizes estabelecem relações de 4,5:1 para texto normal e 3:1 para texto grande no nível AA, e 7:1 e 4,5:1 respectivamente no nível AAA.
Contraste de cor acessível não é apenas um item de checklist — afeta diretamente se usuários com baixa visão, daltonismo ou que leem sob luz solar forte conseguem ler seu conteúdo. Projetar pensando em contraste torna seu produto utilizável por uma audiência mais ampla e é exigência legal em muitas jurisdições.
Casos de uso comuns
- Corpo de texto e títulos: verificar combinações de frente e fundo em designs
- Botões e links: garantir que os CTAs se leiam com clareza sobre seus fundos
- Campos de formulário: checar contraste de rótulos e placeholders
- Gráficos e visualizações: fazer os rótulos de dados se destacarem do visual
- UI mobile: compensar reflexos e telas pequenas
Método 1: Use o verificador de contraste WCAG gratuito do UtilBoxx (Recomendado)
Nosso verificador de contraste de cor WCAG calcula a relação de contraste entre duas cores na hora e avalia em relação aos limites AA e AAA. Veja como usar:
- Vá para utilboxx.com/pt/tools/color/contrast
- Escolha uma cor de frente e uma de fundo (hex, RGB ou seletor)
- Veja a relação de contraste e o status de aprovação AA e AAA
- Experimente os ajustes sugeridos direto na ferramenta
- Copie os valores para seu design system
Por que este método funciona:
- Atualiza ao vivo conforme você ajusta as cores
- Mostra de cara o status AA, AAA, AA Large e AAA Large
- Sugere alternativas acessíveis quando a combinação falha
- Inclui simulador visual (normal, baixa visão, daltonismo)
- 100% no navegador, sem upload de imagens
Método 2: Calcule o contraste à mão
A fórmula da relação de contraste é definida pela WCAG:
- Converta cada cor para sua luminância relativa
- Calcule (L1 + 0,05) / (L2 + 0,05), onde L1 é a cor mais clara
- Arredonde para duas casas decimais
Por exemplo, preto (#000000) sobre branco (#FFFFFF) resulta em 21:1, o máximo possível.
Se não quiser fazer a conta, nosso verificador de contraste é mais rápido.
Método 3: Use as ferramentas de desenvolvedor do navegador
A maioria dos navegadores modernos inclui inspetores de acessibilidade. No Chrome DevTools, clique em "Inspecionar" e abra a aba "Accessibility" no painel Elements para ver a relação de contraste de qualquer elemento da página. Ótimo para depurar código em produção.
Perguntas frequentes
Qual é uma boa relação de contraste?
Para AA, mire ao menos 4,5:1 em texto normal e 3:1 em texto grande. Para AAA, busque 7:1 e 4,5:1 respectivamente. Acima de 7:1 é excelente.
O que conta como "texto grande"?
A WCAG define texto grande como 18pt (24px) regular ou 14pt (18,66px) em negrito. Texto grande tem um limite mais relaxado porque é mais fácil de ler com menos contraste.
O contraste se aplica a elementos não textuais?
Sim. A WCAG 2.1 introduziu um mínimo de 3:1 para componentes de UI e objetos gráficos. Ícones, bordas de campos de formulário e elementos de gráfico devem atender a esse mínimo.
Como verifico contraste sobre gradientes e imagens?
Coloque uma amostra de cor sólida sob o texto no pior caso (a parte mais clara do fundo) e teste. Para imagens, aumente a opacidade de uma sobreposição ou adicione text-shadow para manter a legibilidade.
Conclusão
Contraste acessível é fundamental para o design inclusivo. O verificador de contraste WCAG do UtilBoxx torna a verificação de combinações rápida, visual e didática.