O que esta regra verifica
Certifique-se de que o contraste entre as cores de primeiro plano e de fundo atenda aos limites de relação de contraste WCAG 2 AA.
Por que isso importa
O critério 1.4.3 da WCAG exige uma razão de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande. Preços, selos e banners apagados são difíceis de ler para pessoas com baixa visão e para qualquer pessoa sob luz forte.
Como corrigir
Em qualquer site
- Encontre o texto com baixo contraste e anote as cores do texto e do fundo: um verificador de contraste ou as ferramentas de desenvolvedor do navegador mostram as duas.
- Ajuste a cor do texto ou do fundo no CSS do seu tema até a razão chegar a pelo menos 4.5:1 (3:1 para texto de 24px ou mais, ou de 18,66px em negrito).
- Preste atenção especial a selos de promoção, textos de placeholder, links do rodapé e botões sobre imagens.
Na Shopify
- Encontre o texto com baixo contraste e anote as cores do texto e do fundo: um verificador de contraste ou as ferramentas de desenvolvedor do navegador mostram as duas.
- Em Loja virtual > Temas > Personalizar > Configurações do tema > Cores, escureça a cor do texto ou clareie o fundo do esquema de cores afetado até a razão chegar a pelo menos 4.5:1.
- Preste atenção especial a selos de promoção, textos de placeholder, links do rodapé e botões sobre imagens.
Como conferir a correção
- Faça a análise de novo e confirme que color-contrast não aparece mais.
- Confira por amostragem com um verificador de contraste usando as cores exatas.
Como o FixReports detecta o problema
Nossa análise executa a regra color-contrast do axe-core em um navegador Chrome real em cada página testada e informa cada elemento reprovado com a página, o código e, quando for o caso, uma captura de tela.
Um teste automatizado confirma que esse problema específico existe. Ele não consegue dizer se o restante da página é acessível: algumas barreiras só aparecem quando uma pessoa verifica a página.