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
- 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.
- 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).
- 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
- 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.
- 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.
- 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.
Comment FixReports le détecte
Notre analyse exécute la règle axe-core color-contrast dans un vrai navigateur Chrome sur chaque page testée, et signale chaque élément en échec avec sa page, son balisage et, le cas échéant, une capture d’écran.
Un test automatisé confirme la présence de ce problème précis. Il ne peut pas dire si le reste de la page est accessible : certains obstacles n’apparaissent que lorsqu’une personne vérifie la page.