# Os elementos devem ter contraste de cor suficiente

<https://www.fixreports.com/pt-br/issues/color-contrast>

WCAG 1.4.3 Contraste (Mínimo) · Nível AA

Alguns textos não se destacam o suficiente do fundo para serem lidos por pessoas com baixa visão.

## 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
1. 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.
2. 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).
3. Preste atenção especial a selos de promoção, textos de placeholder, links do rodapé e botões sobre imagens.

### Na Shopify
1. 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.
2. 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.
3. Preste atenção especial a selos de promoção, textos de placeholder, links do rodapé e botões sobre imagens.

### No WooCommerce e no WordPress
1. 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.
2. 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).
3. 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.

## Fontes
- Documentação da regra do axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Entendendo a WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum