Como Verificar o Contraste de Cores para Acessibilidade
Aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres têm alguma forma de deficiência de visão de cores. Milhões mais têm baixa visão, olhos envelhecidos ou estão olhando para telas sob sol forte. Se o seu texto não tem contraste suficiente contra o fundo, essas pessoas não conseguem lê-lo.
Contraste de cores não é apenas um diferencial — é um requisito central de acessibilidade.
O que o WCAG exige
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem taxas mínimas de contraste entre o texto e seu fundo:
| Nível | Texto normal | Texto grande | Elementos UI não textuais |
|---|---|---|---|
| AA (mínimo) | 4,5:1 | 3:1 | 3:1 |
| AAA (aprimorado) | 7:1 | 4,5:1 | — |
"Texto grande" significa 18px em negrito ou 24px normal e acima.
A taxa de contraste vai de 1:1 (sem contraste — branco no branco) até 21:1 (contraste máximo — preto no branco).
Como verificar o contraste
- Selecione suas cores — insira as cores do primeiro plano (texto) e de fundo usando códigos HEX, valores RGB ou seletores de cores.
- Confira os resultados — a ferramenta mostra instantaneamente a taxa de contraste e se a combinação passa no WCAG AA e AAA para texto normal e grande.
- Ajuste se necessário — se o contraste falhar, escureça o texto ou clareie o fundo (ou vice-versa) até atingir o nível exigido.
Erros comuns de contraste
Texto cinza-claro em branco — #999999 sobre #ffffff tem razão de apenas 2,8:1. Isso falha no WCAG AA. Pode parecer "clean" para um designer com visão perfeita, mas é ilegível para muitas pessoas.
Texto colorido sobre fundos coloridos — um botão azul com texto branco costuma passar, mas um botão verde com texto branco pode não passar. Sempre verifique — você não consegue julgar a taxa de contraste apenas no olho.
Texto de placeholder — os placeholders de campos de formulário costumam ter contraste muito baixo. Embora o WCAG não exija estritamente que placeholders atinjam as taxas de contraste, os usuários ainda precisam lê-los.
Modo escuro — designers frequentemente usam texto cinza médio sobre fundo cinza escuro para um visual "sutil". Isso costuma falhar nas verificações de contraste.
Dicas
- Verifique toda combinação de texto e fundo — não presuma. Até designers experientes se surpreendem com quais combinações falham.
- Teste os dois temas — se seu site tem modos claro e escuro, confira o contraste em ambos. Uma cor que funciona no branco pode falhar no cinza escuro.
- Use as cores da sua marca com sabedoria — se o azul da sua marca falha como cor de texto, use-o para elementos maiores (botões, cabeçalhos), onde o limiar de texto grande (3:1) se aplica, e use um tom mais escuro para o corpo do texto.
- Não confie apenas na cor — além de contraste suficiente, nunca transmita informação só pela cor. Use ícones, rótulos de texto ou padrões junto com a cor para garantir que todos possam entender o conteúdo.
Perguntas frequentes
Qual taxa de contraste devo buscar?
Para texto normal, mire em pelo menos 4,5:1 (WCAG AA). Para texto grande (18px em negrito ou 24px normal), 3:1 é suficiente. Para o padrão máximo de acessibilidade (AAA), busque 7:1 para texto normal.
Isso se aplica apenas a texto?
Não. O WCAG 2.1 também exige contraste suficiente para componentes de interface e objetos gráficos (ícones, bordas de formulários, indicadores de foco). O mínimo para elementos não textuais é 3:1.
E quanto ao modo escuro?
O modo escuro precisa das mesmas verificações de contraste. Texto branco em fundo escuro costuma passar facilmente, mas texto cinza em fundo cinza escuro frequentemente falha. Teste os dois modos.
O contraste de cores é uma exigência legal?
Em muitas jurisdições, sim. A ADA (EUA), a EN 301 549 (UE) e leis semelhantes exigem acessibilidade digital. A conformidade com o WCAG é o padrão reconhecido para atender a esses requisitos.