Contraste des couleurs : comment vérifier que votre site reste lisible

Le contraste des couleurs décide si votre texte se lit, ou pas. C'est le critère le plus mesurable de toute l'accessibilité, et le plus souvent raté.

Voici comment le vérifier vous-même, en cinq minutes, sans compétence technique. Puis comment corriger sans casser votre charte graphique.

Mesurer les contrastes de mon site

Ce qu'est le contraste des couleurs, en une phrase

C'est le rapport de luminosité entre le texte et son arrière-plan. Il s'exprime comme un rapport, du type 4,5 pour 1.

Plus le rapport est élevé, plus le texte ressort. Du noir sur blanc atteint le maximum, soit 21 pour 1.

Ce calcul ne dépend ni de votre écran, ni de votre goût. Deux couleurs donnent toujours le même chiffre.

Les trois seuils à connaître

Élément	Rapport minimal	Exemple
Texte courant	4,5 pour 1	Paragraphes, listes, libellés
Grand texte	3 pour 1	Titres à partir de 24 px, ou 19 px en gras
Éléments d'interface	3 pour 1	Bordures de champs, icônes porteuses de sens, indicateur de focus

Retenez surtout la première ligne. Elle concerne quatre-vingt-dix pour cent de votre contenu.

Ce qui échappe à la règle

Trois cas sortent du calcul : les logos, les textes purement décoratifs, et les éléments désactivés.

Attention à la troisième exception. Un bouton grisé pendant un chargement passe, mais un bouton toujours grisé n'a rien de désactivé.

Comment vérifier le contraste des couleurs de votre site

Trois méthodes, de la plus rapide à la plus complète.

La méthode en trente secondes

Ouvrez votre site sur un téléphone, en plein soleil. Les zones qui deviennent illisibles sont précisément celles qui échouent au test.

Ce n'est pas une mesure officielle, mais l'expérience convainc immédiatement une équipe.

La méthode par outil

Un vérificateur de contraste demande deux codes couleur et rend le rapport. Vous trouvez ces codes dans votre charte, ou dans l'inspecteur de votre navigateur.

Le W3C publie les règles de calcul, et de nombreux outils gratuits les appliquent. Le portail de l'accessibilité numérique de l'État recense également des outils recommandés.

La méthode par audit

Un outil automatisé parcourt vos pages et relève chaque écart, avec le rapport obtenu. C'est la seule méthode exhaustive sur un site de plusieurs dizaines de pages.

Les endroits où le contraste des couleurs échoue toujours

Sur les sites que j'audite, les mêmes zones ressortent.

• les textes secondaires en gris clair, sous les titres ;
• les mentions légales et les crédits en pied de page ;
• le texte blanc posé sur une image de fond claire ;
• les libellés à l'intérieur des champs de formulaire ;
• les boutons dont la couleur de marque est trop pâle ;
• les liens qui ne se distinguent que par une nuance de couleur.

Ce dernier point cache en réalité deux défauts. Le contraste avec le fond, et le contraste avec le texte environnant.

L'autre critère, souvent confondu : la couleur seule

Le contraste des couleurs et l'information portée par la couleur sont deux exigences distinctes.

Un champ obligatoire signalé uniquement en rouge échoue, même avec un contraste parfait. Une personne daltonienne ne perçoit pas la distinction.

La règle est simple. Chaque fois que la couleur porte un sens, ajoutez un mot, un symbole ou un motif.

Corriger sans détruire votre identité visuelle

Voici l'objection que j'entends toujours : « ma charte impose cette couleur ».

Dans la quasi-totalité des cas, un ajustement de quelques points de luminosité suffit. L'œil ne perçoit presque pas la différence, le rapport passe.

Trois réflexes fonctionnent bien :

• assombrir la couleur du texte plutôt que changer de teinte ;
• garder la couleur de marque pour les aplats, pas pour le texte ;
• poser un voile sombre entre une image de fond et le texte blanc.

Le troisième point règle à lui seul la plupart des bannières d'accueil.

Trois exemples chiffrés

Couleur du texte	Fond	Rapport	Verdict
Gris très clair	Blanc	1,6 pour 1	Échec net
Gris moyen	Blanc	3,5 pour 1	Passe en grand titre seulement
Gris foncé	Blanc	9 pour 1	Conforme partout

La ligne du milieu illustre le piège. Un texte peut être conforme en titre et non conforme en paragraphe, avec exactement la même couleur.

Le mode sombre change la donne

Un thème sombre ne garantit rien. Le gris moyen sur fond gris foncé échoue exactement comme son équivalent clair.

Testez donc les deux thèmes séparément, si votre site en propose un.

Même remarque pour les états au survol et au focus. Un bouton conforme au repos peut devenir illisible une fois survolé.

Le contraste des couleurs se vérifie donc dans chaque état, pas seulement sur la capture d'écran de présentation.

Ce que vous y gagnez

Un bon contraste sert d'abord vos lecteurs sur mobile, en extérieur. Il sert ensuite vos clients de plus de cinquante ans, dont la vue baisse naturellement.

C'est aussi la correction la moins chère du référentiel. Comptez quelques heures, sans développeur dans la plupart des cas.

Pour situer ce critère dans l'ensemble, consultez notre guide des critères RGAA. Et pour les autres écarts courants, lisez les quinze erreurs les plus fréquentes.

Lancer le dépistage gratuit

Dépistage automatique : il couvre environ 30 % des critères du référentiel. Il ne remplace pas un audit manuel et ne vaut pas attestation de conformité.

Votre charte graphique vous bloque ? Écrivez-nous, nous trouvons la nuance qui passe.