# Les éléments doivent avoir un contraste de couleurs suffisant

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

WCAG 1.4.3 Contraste (minimum) · Niveau AA

Certains textes ne se détachent pas assez de leur arrière-plan pour être lus par les personnes malvoyantes.

## Ce que vérifie cette règle
Vérifier que les contrastes entre le premier plan et l’arrière-plan rencontrent les seuils de contrastes exigés par les WCAG 2 AA.

## Pourquoi c’est important
Le critère WCAG 1.4.3 exige un rapport de contraste d’au moins 4.5:1 pour le texte normal et de 3:1 pour le gros texte. Les prix, badges et bannières pâles sont difficiles à lire pour les personnes malvoyantes, et pour tout le monde en pleine lumière.

## Comment corriger
### Sur n’importe quel site web
1. Repérez le texte peu contrasté et notez ses couleurs de texte et d’arrière-plan : un vérificateur de contraste ou les outils de développement de votre navigateur affichent les deux.
2. Modifiez la couleur du texte ou de l’arrière-plan dans le CSS de votre thème jusqu’à obtenir un rapport d’au moins 4.5:1 (3:1 pour le texte de 24px et plus, ou de 18,66px en gras).
3. Soyez particulièrement attentif aux badges de promotion, aux textes indicatifs (placeholder), aux liens du pied de page et aux boutons placés sur des images.

### Sur Shopify
1. Repérez le texte peu contrasté et notez ses couleurs de texte et d’arrière-plan : un vérificateur de contraste ou les outils de développement de votre navigateur affichent les deux.
2. Dans Boutique en ligne > Thèmes > Personnaliser > Paramètres du thème > Couleurs, assombrissez la couleur du texte ou éclaircissez l’arrière-plan du jeu de couleurs concerné jusqu’à obtenir un rapport d’au moins 4.5:1.
3. Soyez particulièrement attentif aux badges de promotion, aux textes indicatifs (placeholder), aux liens du pied de page et aux boutons placés sur des images.

### Sur WooCommerce et WordPress
1. Repérez le texte peu contrasté et notez ses couleurs de texte et d’arrière-plan : un vérificateur de contraste ou les outils de développement de votre navigateur affichent les deux.
2. Modifiez la couleur du texte ou de l’arrière-plan dans le CSS de votre thème jusqu’à obtenir un rapport d’au moins 4.5:1 (3:1 pour le texte de 24px et plus, ou de 18,66px en gras).
3. Soyez particulièrement attentif aux badges de promotion, aux textes indicatifs (placeholder), aux liens du pied de page et aux boutons placés sur des images.

## Comment vérifier la correction
- Relancez l’analyse et vérifiez que color-contrast n’apparaît plus.
- Contrôlez ponctuellement les couleurs exactes avec un outil de vérification du contraste.

## Sources
- Documentation de la règle axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Comprendre le critère WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum