Contraste de cores e WCAG: como checar em cinco minutos

Um dos problemas de acessibilidade mais comuns é também um dos mais fáceis de corrigir: contraste insuficiente entre texto e fundo. Ele afeta pessoas com baixa visão, daltonismo, usuários mais velhos — e qualquer um lendo o celular ao sol.

O que a WCAG pede

• Texto normal: contraste de pelo menos 4,5:1 com o fundo.
• Texto grande (a partir de cerca de 24px, ou 18,5px em negrito): 3:1.
• Elementos de interface e gráficos (bordas de campos, ícones essenciais, foco): 3:1.

Como medir

• O painel do navegador mostra a taxa de contraste ao inspecionar um texto.
• Ferramentas online calculam a partir de duas cores.
• O Lighthouse aponta os elementos com problema.

Onde mais falha

1. 1.Texto secundário e legendas em cinza claro.
2. 2.Placeholders usados como rótulo.
3. 3.Botões desabilitados que ninguém entende se estão ativos.
4. 4.Texto sobre imagens sem camada de contraste.
5. 5.Cores de erro e sucesso no tema escuro (Dark mode e acessibilidade: como construir interfaces inclusivas sem comprometer o design).

Não dependa só da cor

Erro em vermelho precisa de texto ou ícone; gráficos precisam de rótulos.

Defina nos tokens

Escolher cores com contraste aprovado no design system evita que o problema se repita em cada tela (Design System na prática: como padronizar a UX/UI de produtos digitais ao nível Apple/Stripe).

O foco de teclado também precisa de contraste (Navegação por teclado e focus-visible: o detalhe que separa sites amadores).

Veja sites acessíveis da We Codex ou fale com a gente.