Exercice 5.4 · 6 min · 0 tentative
Mission lisibilité
🎯 Objectif
Comprendre le contraste — et réparer une page dont les textes se noient dans le fond.
📖 Exemple
Compare ces deux phrases, posées sur le même fond blanc :
<p class="fantome">Ce texte fatigue les yeux.</p>
<p class="net">Celui-ci se lit sans effort.</p>
.fantome {
color: #c9c9c9;
}
.net {
color: #1e293b;
}
La première frôle l'invisible : du gris clair sur du blanc, l'œil force pour la lire. La seconde se lit sans effort : du noir bleuté sur du blanc.
Cet écart a un nom : le contraste. On le mesure par un ratio entre la luminosité du texte et celle de son fond. 4,5:1 se lit « 4,5 pour 1 » : la couleur la plus claire est environ 4,5 fois plus lumineuse que la plus sombre. L'échelle va de 1:1 (texte et fond identiques, rien ne se voit) à 21:1 (noir sur blanc, le maximum). Le standard d'accessibilité exige au moins 4,5:1 pour du texte normal. Et ce n'est pas que pour les autres : ton propre écran au soleil, et voilà tout le monde malvoyant.
Un grand texte (24 px, ou 18,66 px en gras) se lit plus facilement : il se contente de 3:1.
Le score de nos deux phrases, sur le même fond blanc :
| Phrase | Couleur du texte | Ratio | Texte normal (minimum 4,5:1) |
|---|---|---|---|
| Fantôme | gris clair #c9c9c9 | 1,6:1 | ✗ Échoué, loin du minimum |
| Net | noir bleuté #1e293b | 14,6:1 | ✓ Réussi, plus de trois fois le minimum |
Mesure-le toi-même : fonce le texte fantôme avec le curseur de luminosité jusqu'à voir passer le verdict.
Grand texte : un titre
Texte normal : lis-moi sans plisser les yeux.
- Échoué · Texte normal minimum 4,5:1
- Échoué · Grand texte minimum 3:1
Fonce ou éclaircis le texte : sa teinte ne bouge pas.
Contraste 1,6:1. Texte normal : échoué, Grand texte : échoué.La règle pratique : texte clair sur fond foncé, ou texte foncé sur fond clair — jamais deux tons voisins.
📝 Consigne
La page de la buvette a un beau fond vert profond... et des textes vert sombre posés dessus. Illisible. Le fond et le titre sont bons — corrige les deux règles fautives :
- Les paragraphes
<p>: remplace leur vert sombre par #d8f3dc, le vert pâle du titre - La ligne d'infos
.infos: remplace son vert moyen par #b7e4c7, un ton juste en dessous
Résultat attendu
Le fond ne bouge pas d'un poil : ce sont les textes qui s'éclaircissent. Résultat, tout se lit — même en plein soleil devant la buvette.
Ce qui est vérifié
- Garder le fond vert profond de la buvette
- Rendre les paragraphes lisibles (#d8f3dc)
- Rendre les infos pratiques lisibles (#b7e4c7)
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)