Le gris clair qui était si beau en maquette
Tu connais cette couleur. Le gris clair, élégant, posé sur fond blanc. Dans la maquette Figma, c'est magnifique. Discret, raffiné, moderne. Le client valide, tu déploies, tu es fier.
Puis quelqu'un ouvre ta page en plein soleil, sur le quai d'une gare. Il ne voit plus rien. Une autre personne la lit sur un écran d'entrée de gamme à 90 € : le texte se fond dans le blanc. Un homme sur douze, lui, est daltonien et ne perçoit pas la nuance que tu avais choisie. Et la presbytie, ce flou de la lecture de près, finit par arriver à tout le monde après 45 ans.
Le contraste n'est pas une affaire de goût. Ce n'est pas « j'aime le gris doux » contre « j'aime le noir franc ». C'est de la physique de la lecture : la quantité de lumière qui sépare ton texte de son fond. Et cette physique-là, on peut la mesurer.
Le problème n°1 du web, chiffré : chaque année, l'analyse WebAIM Million teste l'accueil du million de sites les plus visités. En 2025, le contraste insuffisant est le défaut le plus répandu : présent sur 79,1 % des pages. Devant tout le reste. Ce n'est pas un détail de finition, c'est la première barrière du web.
Le ratio de contraste, simplement
Mesurer le contraste, c'est comparer deux luminances : celle du texte et celle du fond. La luminance, c'est la quantité de lumière qu'une couleur renvoie. Le résultat s'exprime en rapport, de 1:1 (aucun écart, blanc sur blanc, invisible) à 21:1 (l'écart maximal, noir pur sur blanc pur).
Tu n'as pas besoin de la formule. Tu as besoin des seuils. Le standard WCAG en fixe deux, selon la taille du texte :
| Élément | Seuil AA |
|---|---|
| Texte courant (taille normale) | 4,5:1 |
| Grand texte (≥ 24px, ou ≥ 18,5px gras) | 3:1 |
| Composants d'interface et éléments graphiques porteurs de sens (bordure de champ, icône, état) | 3:1 |
La logique est simple : un grand texte épais est plus facile à lire, donc on tolère un peu moins de contraste. Mais le petit texte, lui, a besoin de 4,5:1 minimum. Et attention, ce seuil de 3:1 ne concerne pas que le texte : il s'applique aussi à la bordure d'un champ de formulaire, à une icône qui porte du sens, à l'état d'un bouton. Si l'utilisateur doit percevoir un élément pour s'en servir, cet élément doit ressortir.
AA et AAA : WCAG définit deux niveaux. AA (4,5:1 et 3:1) est le niveau visé partout, et c'est l'exigence légale en Europe. AAA est plus strict (7:1 pour le texte courant) ; vise-le quand tu peux, respecte AA toujours.
Trois gris, trois verdicts
Les seuils restent abstraits tant qu'on ne les voit pas. Voici trois textes gris sur fond blanc, du plus clair au plus foncé. Lis-les vraiment, et regarde le ratio mesuré sous chacun.
Le menu est en haut à droite.
#999 sur blanc · 2,85:1 : échec. Joli, mais sous le seuil. C'est le gris « tendance » qui pénalise tout le monde.
Le menu est en haut à droite.
#767676 sur blanc · 4,54:1 : limite AA. Pile au-dessus de 4,5:1. Ça passe, de justesse.
Le menu est en haut à droite.
#2a2a2e sur blanc · 14,3:1 : passe largement. Net, reposant, lisible partout.
Remarque l'écart : entre #999 et #767676, l'œil voit à peine la différence en maquette. Pourtant l'un échoue et l'autre passe. C'est exactement pourquoi on mesure au lieu de juger à l'œil : ton œil de designer, habitué et reposé, n'est pas l'œil de ton utilisateur fatigué au soleil.
« Accessible, ça veut dire moche » : faux
C'est l'objection qui revient toujours. « Si je dois tout assombrir, mon site va devenir lourd et terne. » Regarde la page que tu lis en ce moment.
La couleur signature de ce site est un vert foncé, #267d42. Sur fond blanc, il atteint 5,13:1 : il passe AA pour le texte courant, sans effort. Il est élégant, identitaire, et parfaitement lisible. Bon design et bon contraste ne s'opposent pas : ils cohabitent.
Les seuils laissent un espace créatif énorme. 4,5:1, ce n'est pas « noir obligatoire ». C'est une borne basse. Au-dessus, tu disposes de millions de couleurs : des bleus profonds, des verts forêt, des terracottas soutenus, des violets denses. La contrainte ne tue pas le design, elle écarte juste le quart de teintes trop pâles qui n'étaient lisibles que pour toi.
Le deuxième pilier : jamais la couleur seule
Le contraste règle la lisibilité. Mais il reste un piège que le contraste ne couvre pas : porter une information uniquement par la couleur.
Souviens-toi de la leçon 5, sur les formulaires : le champ en erreur signalé juste par une bordure rouge. Pour un daltonien, c'est invisible. La forme la plus fréquente de daltonisme confond le rouge et le vert. Or rouge et vert, ce sont précisément les deux couleurs qu'on emploie pour dire « erreur » et « validé ». La pire combinaison possible, choisie par défaut partout.
La règle tient en une phrase : la couleur en plus, jamais la couleur toute seule. Chaque fois qu'une couleur transmet une information, double-la d'un autre signal :
- Un texte ou un libellé. « Erreur : l'e-mail est invalide » dit tout, même en noir et blanc. Un badge « En stock » vaut mieux qu'une simple pastille verte.
- Une icône ou un symbole. Une croix pour l'erreur, une coche pour le succès : le sens passe par la forme, pas seulement par la teinte.
- Un motif ou un soulignement. Dans un texte, les liens doivent être soulignés, pas juste colorés : sinon, sur un paragraphe, rien ne distingue un lien d'un mot ordinaire pour qui ne perçoit pas la couleur. Sur un graphique, des hachures ou des pointillés distinguent les courbes mieux que des couleurs seules.
Le réflexe à attraper : à chaque fois que tu écris « en rouge », « en vert », « la zone bleue », demande-toi : et si l'utilisateur ne voit pas cette couleur, comprend-il quand même ? Si la réponse est non, ajoute un mot, une icône, un trait. La couleur devient alors un renfort, pas le seul porteur du message.
À toi : répare cette carte produit
Voici une carte produit réelle, avec deux défauts d'un coup. Le texte descriptif est en #aaa sur blanc (un ratio de 2,32:1, bien sous le seuil), et le lien « Voir le produit » n'est repérable qu'à sa couleur : rien ne le souligne. Corrige les deux. Assombris le texte pour passer AA, et rends le lien visible autrement que par la couleur.
Voir une solution
Deux corrections, une par défaut :
/* 1 : assombri pour passer AA (#595959 = 7:1) */
.card .desc {
color: #595959;
font-size: 15px;
}
/* 2 : le lien ne repose plus sur la seule couleur */
.card a {
color: #1d4ed8; /* bleu plus foncé, > 4,5:1 */
text-decoration: underline;
}Le texte passe de 2,32:1 à 7:1 : lisible même au soleil. Et le lien est désormais souligné : un daltonien le repère par la forme, sans avoir à distinguer le bleu du noir. La couleur reste, mais elle n'est plus seule à porter l'information.
Un bouton vert avec un texte blanc te semble parfaitement lisible. Tu es designer, reposé, sur un bon écran. Comment savoir s'il passe AA, sans deviner et sans te fier à ton œil ?
Voir la réponse
On mesure le ratio, on ne le devine pas. Tu prends les deux couleurs (le blanc du texte, le vert du fond) et tu calcules le rapport de luminance, puis tu le compares au seuil : 4,5:1 si le texte est petit, 3:1 s'il est grand. Tu n'as aucun outil mental pour estimer ça à l'œil. Deux façons concrètes : le sélecteur de couleur des DevTools affiche directement le ratio avec une pastille AA / AAA, ou tu colles tes deux codes hexa dans le vérificateur de contraste de ce site. Dans les deux cas, c'est un nombre qui tranche, pas un ressenti.
Les outils qui mesurent à ta place
Tu n'as jamais à calculer un ratio à la main. Trois outils font le travail, et tu les as déjà sous la main.
- Le sélecteur de couleur des DevTools. Dans l'inspecteur, clique sur la pastille de couleur d'une règle
color: le navigateur affiche le ratio de contraste et une pastille verte AA / AAA, ou un avertissement si ça échoue. Tu vois le verdict en direct, sur ta vraie page. - Le vérificateur de contraste de ce site. Pour tester une paire de couleurs avant même de coder, colle tes deux codes hexa dans l'outil dédié : le vérificateur de contraste WCAG. Il te donne le ratio et te dit s'il passe AA, AAA, pour texte courant et grand texte.
- Le simulateur de daltonisme des DevTools. Onglet Rendering, section Emulate vision deficiencies : le navigateur rend ta page entière telle que la verrait un daltonien (protanopie, deutéranopie...). Ce n'est pas un gadget : c'est le moyen le plus rapide de repérer une info qui ne tenait qu'à la couleur.
The light gray that looked so good in the mockup
You know that color. Light gray, elegant, set on a white background. In the Figma mockup, it's gorgeous. Understated, refined, modern. The client signs off, you ship, you're proud.
Then someone opens your page in full sun, on a train platform. They can't see a thing. Another person reads it on a 90 euro entry-level screen: the text melts into the white. One man in twelve is colorblind and can't perceive the shade you chose. And presbyopia, that blur of close-up reading, eventually reaches everyone past 45.
Contrast is not a matter of taste. It's not "I like soft gray" versus "I like bold black". It's the physics of reading: the amount of light separating your text from its background. And that physics can be measured.
The web's number one problem, in numbers: every year, the WebAIM Million analysis tests the home page of the million most visited sites. In 2025, low contrast is the most widespread flaw: present on 79.1% of pages. Ahead of everything else. It's not a finishing detail, it's the web's first barrier.
The contrast ratio, simply
Measuring contrast means comparing two luminances: the text's and the background's. Luminance is the amount of light a color returns. The result is a ratio, from 1:1 (no gap, white on white, invisible) to 21:1 (the maximum gap, pure black on pure white).
You don't need the formula. You need the thresholds. The WCAG standard sets two, depending on text size:
| Element | AA threshold |
|---|---|
| Body text (normal size) | 4.5:1 |
| Large text (≥ 24px, or ≥ 18.5px bold) | 3:1 |
| UI components and meaningful graphics (field border, icon, state) | 3:1 |
The logic is simple: large bold text is easier to read, so a little less contrast is tolerated. But small text needs at least 4.5:1. And note, this 3:1 threshold isn't just about text: it also applies to a form field's border, to a meaningful icon, to a button's state. If the user has to perceive an element to use it, that element must stand out.
AA and AAA: WCAG defines two levels. AA (4.5:1 and 3:1) is the level aimed for everywhere, and it's the legal requirement in Europe. AAA is stricter (7:1 for body text); aim for it when you can, always meet AA.
Three grays, three verdicts
The thresholds stay abstract until you see them. Here are three gray texts on white, from lightest to darkest. Read them for real, and look at the measured ratio under each.
The menu is at the top right.
#999 on white · 2.85:1 — fail. Pretty, but below the threshold. The "trendy" gray that penalizes everyone.
The menu is at the top right.
#767676 on white · 4.54:1 — AA borderline. Just above 4.5:1. It passes, barely.
The menu is at the top right.
#2a2a2e on white · 14.3:1 — passes comfortably. Crisp, restful, readable everywhere.
Notice the gap: between #999 and #767676, the eye barely sees a difference in the mockup. Yet one fails and the other passes. That's exactly why you measure instead of judging by eye: your designer's eye, trained and rested, is not your tired user's eye in the sun.
"Accessible means ugly": false
It's the objection that always comes up. "If I have to darken everything, my site will get heavy and dull." Look at the page you're reading right now.
This site's signature color is a dark green, #267d42. On white, it reaches 5.13:1: it passes AA for body text, effortlessly. It's elegant, distinctive, and perfectly readable. Good design and good contrast don't fight: they coexist.
The thresholds leave a huge creative space. 4.5:1 isn't "black mandatory". It's a low bound. Above it, you have millions of colors: deep blues, forest greens, rich terracottas, dense purples. The constraint doesn't kill design, it just rules out the quarter of shades too pale to be readable for anyone but you.
The second pillar: never color alone
Contrast handles readability. But there's a trap contrast doesn't cover: carrying information only through color.
Remember lesson 5, on forms: the error field flagged only by a red border. To a colorblind user, that's invisible. The most common form of color blindness confuses red and green. And red and green are precisely the two colors used to say "error" and "valid". The worst possible combination, chosen by default everywhere.
The rule fits in one sentence: color as a bonus, never color on its own. Each time a color conveys information, back it with another signal:
- Text or a label. "Error: the email is invalid" says it all, even in black and white. An "In stock" badge beats a plain green dot.
- An icon or a symbol. A cross for error, a check for success: meaning comes through shape, not just hue.
- A pattern or an underline. In running text, links must be underlined, not just colored: otherwise, in a paragraph, nothing tells a link from an ordinary word for someone who doesn't perceive color. On a chart, hatching or dashes distinguish lines better than colors alone.
The reflex to build: every time you write "in red", "in green", "the blue zone", ask yourself: if the user can't see that color, do they still understand? If the answer is no, add a word, an icon, a line. The color then becomes reinforcement, not the sole carrier of the message.
Your turn: fix this product card
Here's a real product card, with two flaws at once. The description text is in #aaa on white (a ratio of 2.32:1, well below the threshold), and the "View product" link is identifiable by its color only: nothing underlines it. Fix both. Darken the text to pass AA, and make the link visible other than by color.
Show a solution
Two fixes, one per flaw:
/* 1: darkened to pass AA (#595959 = 7:1) */
.card .desc {
color: #595959;
font-size: 15px;
}
/* 2: the link no longer rests on color alone */
.card a {
color: #1d4ed8; /* darker blue, > 4.5:1 */
text-decoration: underline;
}The text goes from 2.32:1 to 7:1: readable even in the sun. And the link is now underlined: a colorblind user spots it by shape, without having to tell blue from black. The color stays, but it's no longer alone in carrying the information.
A green button with white text looks perfectly readable to you. You're a designer, rested, on a good screen. How do you know whether it passes AA, without guessing and without trusting your eye?
Show the answer
You measure the ratio, you don't guess it. You take the two colors (the white of the text, the green of the background) and compute the luminance ratio, then compare it to the threshold: 4.5:1 if the text is small, 3:1 if it's large. You have no mental tool to estimate this by eye. Two concrete ways: the DevTools color picker shows the ratio directly with an AA / AAA badge, or you paste your two hex codes into this site's contrast checker. Either way, it's a number that decides, not a feeling.
The tools that measure for you
You never have to compute a ratio by hand. Three tools do the work, and you already have them within reach.
- The DevTools color picker. In the inspector, click the color swatch of a
colorrule: the browser shows the contrast ratio and a green AA / AAA badge, or a warning if it fails. You see the verdict live, on your real page. - This site's contrast checker. To test a color pair before even coding, paste your two hex codes into the dedicated tool: the WCAG contrast checker. It gives you the ratio and tells you whether it passes AA, AAA, for body and large text.
- The DevTools color-blindness simulator. The Rendering tab, Emulate vision deficiencies section: the browser renders your whole page as a colorblind user would see it (protanopia, deuteranopia...). It's not a gadget: it's the fastest way to spot information that hung on color alone.
🎯 Pratique
S'entraîner (clique pour ouvrir) :
💬 Ré-explique sans regarder
Explique à un collègue les deux piliers de la couleur accessible : le seuil de contraste, et la règle « jamais la couleur seule ». Donne un exemple concret pour chacun.
#999 sur blanc (2,85:1) échoue ; #2a2a2e (14,3:1) passe largement. 2) Jamais la couleur seule : toute info portée par une couleur doit être doublée d'un texte, d'une icône ou d'un soulignement, sinon un daltonien la perd. Exemple : une erreur de formulaire signalée juste en rouge est invisible pour qui confond rouge et vert ; ajoute « Erreur : … » et une croix.🧠 Rappel libre
Sans remonter : quels sont les deux seuils de contraste AA, et à quoi s'applique chacun ?
⚖️ Juge le code de l'IA
Tu demandes à l'IA de signaler les champs obligatoires de ton formulaire. Elle répond : « Fait ! J'ajoute une étoile rouge * après le label des champs requis, et je laisse le reste en noir. » Tu acceptes, ou tu rejettes ?
* est une forme, pas seulement une couleur : un daltonien la voit. Donc « couleur seule » n'est pas le vrai problème ici. Deux conditions doivent quand même être remplies. 1) Le sens de l'étoile doit être annoncé en clair quelque part (« Les champs marqués d'une * sont obligatoires »), sinon le symbole reste mystérieux. 2) Le rouge de l'étoile doit lui-même passer le contraste sur le fond. Si ces deux points sont assurés, c'est une bonne solution. Le piège serait de signaler l'obligation uniquement en colorant le label en rouge, sans symbole ni texte : ça, on le rejette.Final stretch: ARIA, the most misused tool on the web. You'll understand why we kept it for last, when it really helps and when it breaks everything, and how to audit a site for free, with the mouse and with the keyboard.
Lesson 7: ARIA and real testing →