En bref
Un texte trop pâle sur son fond devient difficile, voire impossible, à lire. Le contraste se mesure par un ratio entre deux couleurs. Les référentiels fixent des seuils minimaux selon la taille du texte et le type d’élément. Autre règle clé : une information ne doit jamais passer uniquement par la couleur.
Comprendre le ratio de contraste
Le ratio compare la luminosité de deux couleurs. Il va de 1:1, deux couleurs identiques, à 21:1, du noir sur du blanc. Plus le premier nombre est élevé, plus la lecture est facile.
Ce que dit le référentiel
Le référentiel général d’amélioration de l’accessibilité (RGAA), version 4.1.2, fixe ces seuils dans ses critères 3.2 et 3.3 :
- 4,5:1 au moins pour le texte courant : le texte non gras de moins de 24 pixels, et le texte gras de moins de 18,5 pixels.
- 3:1 au moins pour le texte de 24 pixels ou plus, et pour le texte en gras de 18,5 pixels ou plus.
- 3:1 au moins pour les composants d’interface, comme le contour d’un champ ou d’un bouton, dans leurs différents états.
- 3:1 au moins pour les éléments graphiques nécessaires à la compréhension, comme les barres d’un graphique ou une icône seule.
Le critère 3.1 demande que l’information ne soit pas donnée uniquement par la couleur. Les règles internationales pour l’accessibilité des contenus web (WCAG) 2.2 retiennent les mêmes seuils, au niveau AA. Des cas particuliers existent, par exemple les logos ou les éléments purement décoratifs.
Ne jamais compter sur la seule couleur
Certaines personnes distinguent mal les couleurs. D’autres utilisent un écran en noir et blanc ou un affichage modifié. Ajoutez toujours un second indice :
- Un champ en erreur : bordure rouge et message écrit.
- Un lien dans un paragraphe : couleur et soulignement.
- Un graphique : étiquettes, motifs ou formes différentes.
- Un statut « complet » ou « disponible » : un mot ou une icône, pas seulement une pastille verte ou rouge.
Vérifier simplement
- Relevez le code des couleurs utilisées, souvent au format hexadécimal.
- Saisissez-les dans un outil de mesure de contraste. Il en existe de gratuits, en ligne, en extension de navigateur ou dans les outils de développement des navigateurs.
- Comparez le résultat au seuil qui correspond à la taille du texte.
- Pour un texte posé sur une photo, mesurez la zone la moins favorable.
- Testez aussi les états survol, sélection et focus.
- Affichez la page en niveaux de gris : l’information reste-t-elle compréhensible ?
Construire une palette sûre
- Listez les paires de couleurs validées : texte sur fond, bouton sur fond.
- Notez le ratio de chaque paire dans votre charte.
- Réservez les couleurs claires aux fonds et aux grands éléments décoratifs.
- Vérifiez de nouveau à chaque nouvelle couleur.
Limites
Atteindre un seuil ne garantit pas la lisibilité pour tout le monde. La taille, la police, l’écran et l’éclairage comptent aussi. Certaines personnes sont gênées par un contraste trop fort. Cette fiche ne remplace pas un audit d’accessibilité complet.
Nature : Bonne pratique, avec une référence réglementaire.
Public : personnes qui créent des supports, des sites ou des chartes graphiques.
Textes de référence : RGAA 4.1.2, critères 3.1, 3.2 et 3.3 ; W3C, WCAG 2.2, critère 1.4.3 Contraste minimum, en anglais ; W3C, WCAG 2.2, critère 1.4.11 Contraste des éléments non textuels, en anglais ; pages consultées le 28 octobre 2026.