Contraste de cores e WCAG: qual é a exigência e como medir?

Resposta rápida. A WCAG nível AA exige uma razão de contraste de no mínimo 4,5:1 entre texto e fundo para texto comum, e 3:1 para texto grande e elementos gráficos (ícones, bordas de campos de entrada). Contraste insuficiente é de longe o erro de acessibilidade mais comum em lojas virtuais — e, felizmente, muitas vezes resolvível de uma vez em todo o tema. Além disso, é 100% mensurável com exatidão por software, então não há o que discutir.

Por que o contraste é tão importante?

Texto cinza-claro sobre branco parece elegante na sua tela, mas é difícil de ler para pessoas com baixa visão, para visitantes mais velhos e para qualquer um que olhe o celular sob sol forte. Boa parte dos seus clientes se enquadra em pelo menos um desses grupos. Contraste ruim custa, portanto, literalmente legibilidade — e, com ela, vendas.

Quais são as exigências exatas de contraste da WCAG?

A norma distingue por tamanho do texto e tipo de elemento. Quanto menores as letras, mais nítido o contraste precisa ser:

• Texto comum (menor que 24px, ou 18,66px em negrito): no mínimo 4,5:1.
• Texto grande (a partir de 24px, ou 18,66px em negrito — ou seja, 18pt / 14pt bold): no mínimo 3:1.
• Componentes gráficos (ícones, bordas de campos de entrada, bordas de botões ativos): no mínimo 3:1 em relação às cores adjacentes (WCAG 1.4.11).

O contraste é expresso como uma razão: 1:1 é nenhum contraste, 21:1 é preto puro sobre branco. Algumas combinações comuns:

Como você mesmo mede o contraste?

Você não precisa adivinhar, nem mexer com fórmulas por conta própria. Há três maneiras confiáveis:

1. Uma varredura automatizada (recomendado). Ferramentas como a Seviranta calculam o valor de contraste de cada elemento de texto na página de uma vez e marcam a linha exata de código dos infratores — incluindo o valor medido ao lado do exigido.
2. As ferramentas de desenvolvedor do seu navegador. No Chrome ou Edge, clique com o botão direito sobre o texto → "Inspecionar"; o seletor de cores costuma mostrar direto a razão de contraste e o status WCAG.
3. Um verificador de contraste manual. Insira os dois códigos Hex e você recebe a razão. Útil na fase de design, mas demorado para um site inteiro no ar.

Como corrigir erros de contraste de forma eficiente?

O bom dos erros de contraste: eles quase sempre são controlados de forma centralizada. No Shopify, WooCommerce ou Magento, as cores estão ligadas a variáveis globais no seu tema. Deixe a cor do texto ou do fundo um tom mais escura ou mais clara até a razão ficar correta, e você cumpre de uma vez para a sua loja virtual inteira a exigência de contraste.

Comece pelo seu funil de conversão: o texto dos botões "Adicionar ao carrinho" e "Finalizar compra", seus rótulos de preço, itens de menu e os avisos no checkout. É aí que está o maior ganho. Aliás, este é um dos 10 erros de acessibilidade mais comuns.

Por que um widget de acessibilidade não resolve isso?

Muitos empreendedores esperam corrigir o contraste com um widget de overlay e seu "botão de alto contraste". Isso é técnica e juridicamente insuficiente: reguladores e rastreadores de IA verificam o estado padrão do seu código-fonte. Se o seu CSS não cumpre 4,5:1, então você não cumpre — uma camada temporária de JavaScript não muda isso. Por que um widget de overlay não protege você aprofunda esse ponto. A única rota sustentável é ajustar as cores no seu próprio tema.

O que muda com a WCAG 3.0 (APCA)?

Nas futuras diretrizes WCAG 3.0, a atual fórmula matemática de contraste será substituída pela APCA (Advanced Perceptual Contrast Algorithm). A APCA se alinha melhor com a forma como o olho humano realmente percebe o contraste — ela leva em conta fonte, espessura e contexto, em vez de apenas o brilho de duas cores. Se você ajustar seu site agora com rigor à exigência de 4,5:1 da WCAG 2.1/2.2, estará também bem preparado para essa transição.

Veja onde está o seu site

Curioso para saber quais cores do seu site ainda não cumprem? Escaneie uma página gratuitamente. Você vê, em cada ponto, a razão de contraste medida ao lado da exigida, com as cores reais do seu site — em menos de 60 segundos, sem conta.