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 : gris clair sur blanc, contraste d'environ 1,6:1. La seconde affiche 14:1 : noir bleuté sur blanc.
Le contraste mesure l'écart de luminosité entre un texte et son fond, de 1:1 (identiques) à 21:1 (noir sur blanc). 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.
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)