Contraste de cores para acessibilidade: WCAG 2.1, APCA e o que realmente implementar

O WCAG 2.1 exige proporção de contraste de 4,5:1para texto de corpo regular e 3:1 para texto grande (18pt+ regular ou 14pt+ negrito). A fórmula é o padrão legal de fato nos EUA (relevante para a ADA), UE (EAA) e na maior parte do mundo. Ela também tem falhas bem documentadas que geraram uma substituição (APCA) que não entrou no WCAG 2.2. Este guia explica o quadro prático atual.

A fórmula de contraste WCAG 2.x

Definida no WCAG 2.0 (2008) e inalterada até 2.2:

contraste = (L_claro + 0,05) / (L_escuro + 0,05)
onde L = luminância relativa (0-1) de cada cor, computada em sRGB de luz linear

Os resultados variam de 1:1 (cores idênticas) a 21:1 (branco puro em preto puro).

Limiares WCAG (para conformidade AA, o alvo padrão):

• 4,5:1 — texto de corpo, ícones, controles de formulário.
• 3:1 — texto grande (≥ 18pt ou ≥ 14pt negrito), componentes de UI.
• AAA é mais rigoroso: 7:1 corpo, 4,5:1 grande.

Onde a fórmula está errada

Três problemas documentados:

1. Insensibilidade de meia-tonalidade. A fórmula dá pontuações de contraste iguais a pares de meia-tonalidade (p. ex., cinza sobre cinza) que parecem muito diferentes na percepção real.
2. Sem detectar matiz. Matizes de luminância igual (vermelho e verde no mesmo brilho) pontuam contraste 1:1, mas usuários daltônicos podem discriminá-los mal de qualquer forma.
3. Peso de fonte ignorado.Fontes finas precisam de mais contraste do que fontes em negrito no mesmo tamanho; o WCAG não dá crédito pelo peso além do limiar binário de “texto grande”.

APCA: a substituição que não entrou no WCAG 2.2

APCA (Accessible Perceptual Contrast Algorithm — Algoritmo de Contraste Perceptual Acessível) é a métrica de contraste de próxima geração proposta e rejeitada. Desenvolvido por Andrew Somers para o rascunho de trabalho WCAG 3.0. Leva em conta as questões acima e é dramaticamente mais preciso em relação a dados de estudos de usuários reais.

As pontuações APCA variam de −108 a +106. Positivo significa texto escuro em fundo claro; negativo significa o contrário. Limiares:

• Lc 75 — texto de corpo (substitui o 4,5:1 do WCAG).
• Lc 60 — texto grande ou títulos (substitui 3:1).
• Lc 45 — texto não-conteúdo (decorativo, linhas de copyright).

O que usar em 2026

Abordagem de duas vias:

1. Passe o WCAG 2.1 AA no mínimo. É o padrão legal. Use a fórmula de proporção padrão, mire em 4,5:1 corpo / 3:1 grande. Ferramentas: npm i wcag-contrast para programático, DevTools do navegador para ad-hoc.
2. Use APCA como verificação de sanidade. Quando o WCAG passa, mas o resultado parece subjetivamente fraco, o APCA geralmente o sinaliza. APCA está disponível como apca-w3(npm) e em ferramentas dedicadas.

Recomendações concretas

• Texto de corpo: mirar em #1a1a1a(cinza escuro) no branco dá ~17:1 — agradável, claramente legível.
• Texto desabilitado / placeholder:o WCAG isenta “componentes de UI inativos” da regra de 4,5:1, mas os usuários ainda precisam ler os placeholders. Mire em 3:1 mínimo.
• Botões: o texto do botão vs fundo do botão deve atingir 4,5:1. A borda do botão vs fundo da página deve atingir 3:1.
• Indicadores de foco: o contorno de foco deve atingir 3:1 em relação ao fundo adjacente.
• Modo escuro: a fórmula WCAG é simétrica; os números se traduzem. Mas o APCA é assimétrico — o modo escuro tende a precisar de tokens de design ligeiramente diferentes do modo claro para a mesma qualidade percebida.

O que ignorar

• Não use contraste como único sinal para estado. Estados de erro precisam de contraste e outro sinal (um ícone, texto).
• Não mire em AAA reflexivamente. AA é o teto de design para a maioria dos produtos.
• Não confie em rampas de cores geradas automaticamente sem verificação crítica. Verifique cada par adjacente.

O fluxo de trabalho pragmático

No momento do design: use o verificador de contraste WCAG em sua ferramenta de design (Figma, Sketch, Adobe XD todos têm plugins). Atinja os mínimos 4,5:1 / 3:1.

No momento do código: faça lint de seus tokens de design contra WCAG. Falhe na CI em regressões.

No momento do QA: testes reais com leitor de tela e navegação por teclado.

Exemplo: uma cor de marca que “passa”

Azul-petróleo da marca #3aa6a0 em fundo branco. Contraste WCAG: 2,99:1 — falha no AA para texto de corpo (precisa de 4,5:1) e falha no limiar de 3:1 para texto grande por pouco. Pontuação APCA: Lc 52.

Escurecendo o azul-petróleo um passo para #2f8682: WCAG 4,52:1 (passa no AA para corpo), APCA Lc 67 (passa no APCA para texto grande, marginal para corpo). Uma mudança de um dígito hexadecimal move o componente de reprovação para aprovação.

Erros comuns

• Testando apenas contra branco. Cada par precisa de sua própria verificação. Um sistema de tokens que exige verificação de contraste por par captura o que os olhos perdem.
• Ignorando texto sobre imagens. Títulos sobre fotografias quase sempre falham em algum lugar da imagem. Soluções: uma sobreposição semi-transparente escura sob o texto, uma sombra de texto, ou reposicionar o texto em um painel sólido.
• Confiando em estados de hover para legibilidade. Se o estado de repouso falha, o hover não o salva.
• Usando rgba() com alfa baixo para texto. Texto translúcido herda o que está atrás dele. Use valores hex opacos para texto.

Para as mecânicas de espaço de cor subjacentes que a fórmula lineariza, veja nosso guia de formatos de cores CSS.