Pular para o conteúdo

Contraste de cores e acessibilidade (WCAG)

Atualizado em 30 de junho de 2026 · por Rafael Rossi

Contraste suficiente entre texto e fundo é essencial para quem tem baixa visão — e ajuda todo mundo a ler melhor.

Razão de contraste

Vai de 1:1 (cores iguais) a 21:1 (preto no branco). Calcula-se pela luminância de cada cor.

Os níveis da WCAG

  • AA: mínimo 4,5:1 para texto normal, 3:1 para texto grande.
  • AAA: mínimo 7:1 para texto normal.

O que conta como "texto grande"

A partir de 18 pt (24 px) normal, ou 14 pt (18,66 px) em negrito. Textos maiores precisam de menos contraste (3:1 no AA) porque as formas das letras já são mais fáceis de distinguir.

Dicas práticas

Evite cinza-claro sobre branco (o campeão de falhas de contraste). Se um texto pequeno não atinge 4,5:1, escureça a cor ou aumente/engrosse a fonte. Não use só a cor para transmitir informação (ex.: "campos em vermelho"): quem tem daltonismo pode não perceber.

Perguntas frequentes

O contraste vale para ícones e botões? Sim. Elementos gráficos e de interface precisam de pelo menos 3:1 contra o fundo (WCAG 2.1).

Por que o contraste ajuda todo mundo? Melhora a leitura sob sol forte, em telas baratas e para olhos cansados — não só para quem tem baixa visão.

Abrir a calculadora: Contraste de cores (WCAG) →