Contraste et lisibilité : vérifier un couple de couleurs
Le gris clair sur blanc est le choix de couleur le plus fréquent des maquettes, et le seul qui rende un texte illisible pour une partie des gens qui essaient de le lire.
Parlons de votre projet
Un rappel sous 24 h ouvrées. Sans engagement.
Deux couleurs
Saisissez les couleurs en hexadécimal. Le calcul se fait dans votre navigateur : aucune valeur saisie ne quitte cette page.
Un texte de démonstration, avec une ligne assez longue pour qu’on juge de la fatigue à la lecture et pas seulement du contraste d’une majuscule isolée.
Le résultat s’affiche ici dès que les champs sont remplis. Si JavaScript est désactivé, la formule est écrite en toutes lettres plus bas : le calcul se fait alors à la main, avec le même résultat.
Ce calcul se fait entièrement dans votre navigateur. Aucune valeur saisie n’est envoyée sur un serveur, ni enregistrée, ni transmise à un tiers : il n’y a aucun appel réseau sur cette page.
Par Aurélie Ducasteaux · mis à jour le 3 septembre 2026
Ce que mesure ce rapport, et ce qu’il ne mesure pas
Le rapport de contraste compare la luminance relative de deux couleurs, c’est-à-dire la quantité de lumière qu’elles renvoient, indépendamment de leur teinte. Il va de 1 pour 1, quand les deux couleurs sont identiques, à 21 pour 1, entre le noir absolu et le blanc absolu.
La formule est publiée dans les WCAG, les règles d’accessibilité du W3C. Chaque canal de la couleur est d’abord ramené entre 0 et 1, puis linéarisé : si la valeur est inférieure ou égale à 0,03928, on la divise par 12,92 ; sinon on lui ajoute 0,055, on divise par 1,055 et on élève à la puissance 2,4. On combine ensuite les trois canaux avec les coefficients 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu. Ces coefficients ne sont pas arbitraires : l’œil humain est nettement plus sensible au vert qu’au bleu, et le vert pèse donc dix fois plus dans le calcul.
Le rapport final vaut (L₁ + 0,05) ÷ (L₂ + 0,05), la plus claire au numérateur. Le terme 0,05 représente la lumière ambiante qui se reflète toujours sur un écran.
Ce que le rapport ne mesure pas : la fatigue. Un texte peut passer le seuil et rester pénible à lire, parce que la ligne est trop longue, l’interlignage trop serré ou la graisse trop fine. Le rapport est une condition, pas une garantie.
Les seuils, et lesquels s’appliquent en France
| Cas | Niveau AA | Niveau AAA |
|---|---|---|
| Texte courant | 4,5 : 1 | 7 : 1 |
| Texte large (≥ 24 px, ou ≥ 18,66 px en gras) | 3 : 1 | 4,5 : 1 |
| Éléments non textuels : bordures, icônes, focus | 3 : 1 | — |
Le RGAA, référentiel appliqué en France aux sites des administrations et à ceux des grandes entreprises, reprend ces valeurs et vise le niveau AA. Le AAA reste un objectif de confort, pas une obligation ; sur un texte long lu à l’écran, il coûte rarement cher et il se sent tout de suite.
La ligne des éléments non textuels est celle qu’on oublie. Une bordure de champ de formulaire en gris très clair, une icône de menu à peine visible, un anneau de focus qui disparaît sur le fond de la page : tous relèvent du seuil de 3 pour 1, et aucun n’est du texte.
Le gris clair sur blanc
C’est le cas le plus fréquent, et il vient d’une bonne intention : adoucir. Un texte en #999999 sur blanc donne un rapport de 2,85 pour 1. Il échoue partout, y compris pour une bordure. En #767676, on atteint tout juste 4,54 pour 1 : c’est la limite basse du gris utilisable pour du texte courant sur fond blanc.
Le problème n’est pas théorique. La presbytie touche à peu près tout le monde après quarante-cinq ans, la cataracte réduit le contraste perçu, et un écran de téléphone en plein soleil divise le contraste réel par un facteur que personne ne mesure. Le rapport calculé ici est celui d’un écran dans une pièce normale : c’est déjà le cas favorable.
Ce qu’il faut vérifier au-delà de deux couleurs
Le texte sur une image. Le rapport dépend alors du pixel qui se trouve derrière chaque lettre, et il change d’un coin à l’autre. Un voile de couleur uni entre l’image et le texte est la seule solution fiable ; testez le couple texte / voile, pas le couple texte / image.
Le texte en couleur sur fond coloré. Deux couleurs de marque peuvent être très différentes en teinte et très proches en luminance. Un orange vif sur un rouge donne un rapport proche de 1,5 : l’œil voit deux couleurs mais ne lit rien. C’est le piège de la charte graphique qui n’a jamais été testée.
Les états. Un lien survolé, un bouton désactivé, un champ en erreur : chaque état a ses couleurs, et chacun doit passer. Le bouton désactivé est le cas limite, parce que les WCAG l’exemptent formellement, ce qui n’en fait pas un bon design pour autant.
La couleur seule. Si l’information passe uniquement par une couleur — le rouge pour l’erreur, le vert pour la validation — elle disparaît pour une personne daltonienne, et environ un homme sur douze l’est à un degré ou un autre. Le mot doit être écrit à côté. C’est ce que fait cet outil : le verdict est en toutes lettres, la couleur ne fait que le doubler.
Choisir des couleurs qui passent avant de dessiner
L’ordre habituel est mauvais : on choisit une palette parce qu’elle est belle, on dessine, puis on découvre au moment de la recette que le texte secondaire ne passe pas et qu’il faut assombrir un gris qui tenait tout l’équilibre.
Le bon ordre tient en trois vérifications faites au moment où la palette est encore modifiable. Le texte courant sur chacun des fonds prévus. La couleur d’accent sur chacun des fonds, pour les liens et les boutons. Et les bordures, qui doivent atteindre 3 pour 1 sur leur fond, ce qui élimine d’office les gris très clairs qu’on aime tant pour les filets.
Questions fréquentes
Le niveau AAA est-il obligatoire ?
Non. Le RGAA, comme la directive européenne dont il découle, vise le niveau AA. Le AAA est un objectif de confort. Sur un site de texte long, viser 7 pour 1 sur le corps de texte est une décision de lisibilité, pas de conformité.
Comment tester un texte posé sur une photo ?
En testant le couple entre le texte et le voile de couleur uni que vous posez entre les deux, jamais entre le texte et la photo. Le rapport calculé sur une photo change d’un pixel à l’autre : il n’existe pas de valeur unique, donc pas de vérification possible.
Un texte blanc sur ma couleur de marque passe-t-il forcément ?
Rien n’est acquis. Le blanc sur un bleu foncé passe largement ; le blanc sur un jaune ou un vert clair échoue systématiquement, parce que ces teintes ont une luminance élevée. C’est une vérification à faire au moment de la création de la charte graphique, quand la couleur est encore négociable.
Pourquoi le résultat est-il arrondi vers le bas ?
Pour ne jamais faire passer un seuil par la faveur d’un arrondi. Un rapport réel de 4,497 s’afficherait 4,50 avec un arrondi ordinaire et donnerait l’impression d’atteindre le seuil de 4,5. L’outil affiche 4,49 et déclare le seuil non atteint, ce qui est la réponse exacte.
Pour aller plus loin
Les pages du site qui traitent au fond ce que l’outil calcule.