Contraste insuffisant sur une boutique Shopify : le repérer et le corriger

9 septembre 2026

C'est le défaut d'accessibilité le plus répandu du web, et l'un des plus faciles à corriger. Encore faut-il savoir le mesurer, et où intervenir dans un thème Shopify.

De quoi s'agit-il

Le contraste, c'est l'écart de luminosité entre un texte et le fond sur lequel il est posé. Du gris clair sur blanc, du blanc sur jaune, du texte posé sur une photo : ces combinaisons paraissent souvent élégantes sur l'écran du concepteur, et deviennent illisibles ailleurs.

Les personnes concernées ne sont pas seulement les malvoyants. Toute personne consultant un téléphone en plein soleil, sur un écran bon marché, ou simplement fatiguée en fin de journée, rencontre le même problème.

Les seuils à respecter

Le référentiel WCAG 2.1, au niveau AA visé par la réglementation européenne, fixe des rapports de contraste minimaux.

À titre de repère, du noir pur sur blanc pur atteint 21 pour 1. Un gris moyen comme #767676 sur blanc tombe exactement à 4,54, soit tout juste au-dessus du seuil. Un gris plus clair, très courant sur les sites de commerce, passe en dessous.

Comment le mesurer

Vous ne pouvez pas juger un contraste à l'œil : notre perception est trompeuse, et un texte qui vous semble lisible peut être en dessous du seuil.

Avec les outils du navigateur

Sur Chrome ou Firefox, appuyez sur F12, sélectionnez l'élément de texte, et regardez la couleur dans le panneau des styles. Le navigateur affiche directement le rapport de contraste et indique s'il satisfait le niveau AA.

Avec un vérificateur en ligne

De nombreux outils gratuits calculent le rapport à partir de deux codes couleur. Utile quand vous choisissez une palette avant même de l'appliquer.

Sur toute la boutique d'un coup

Les deux méthodes précédentes traitent un élément à la fois. Sur une boutique complète, un outil d'analyse automatique parcourt les pages et relève toutes les occurrences. Le contraste fait partie des rares critères qu'une machine mesure de façon parfaitement fiable, puisqu'il s'agit d'un calcul.

Où corriger dans un thème Shopify

La réponse dépend de l'origine du problème, et c'est la première chose à établir.

Le personnalisateur de thème

La majorité des cas se règlent sans toucher au code. Dans l'administration, allez dans Boutique en ligne, puis Thèmes, puis Personnaliser, et cherchez les réglages de couleurs. Les thèmes récents proposent des jeux de couleurs applicables par section.

Modifiez la couleur du texte plutôt que celle du fond : c'est généralement moins visible sur l'identité visuelle de la marque.

Le texte posé sur une image

Cas fréquent sur les bannières de page d'accueil. Le contraste y varie selon l'endroit de l'image, donc aucune couleur de texte ne convient partout.

La solution habituelle consiste à ajouter un voile sombre semi-transparent entre l'image et le texte. La plupart des thèmes proposent ce réglage sous un nom comme superposition ou opacité de l'image.

Une application tierce

Les bandeaux de promotion, fenêtres surgissantes et widgets d'avis apportent leurs propres couleurs, qui échappent au personnalisateur. Il faut alors les reconfigurer dans l'application concernée, ou la remplacer.

C'est un cas courant et souvent mal identifié : le marchand cherche dans son thème un problème qui n'y est pas.

Le thème officiel lui-même

Il arrive que le défaut vienne du thème livré par Shopify. Dans ce cas, ne modifiez pas son code : la correction serait écrasée à la prochaine mise à jour. Signalez-le au support et conservez la trace de votre signalement.

Deux erreurs fréquentes

Ce que le contraste ne règle pas

Le contraste est un critère parmi une centaine. Le corriger améliore réellement l'expérience d'une partie de vos visiteurs, mais ne rend pas une boutique accessible pour autant. Les images sans description, la navigation au clavier et les formulaires sans étiquette restent à traiter.

Et rappelons qu'aucun outil automatique ne permet de déclarer une conformité : une part importante des critères exige une vérification humaine. Nous détaillons ici ce que la réglementation européenne exige réellement.