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)?

Para as futuras diretrizes WCAG 3.0, a APCA (Advanced Perceptual Contrast Algorithm) está sendo avaliada como possível sucessora da atual fórmula matemática de contraste, isso ainda não foi decidido. 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. Escaneie seu site gratuitamente.