Partie 7 — Texte, couleur & contraste

⏱️ TL;DR — Pour qu’un contenu soit perceptible, il ne suffit pas qu’il existe dans le DOM : il faut qu’un humain puisse réellement le voir et le lire. Ça veut dire quatre choses concrètes : un contraste suffisant entre le texte et son fond, une information qui ne repose jamais sur la couleur seule, un contenu qui reste utilisable quand on l’agrandit ou qu’on zoome, et une langue déclarée au navigateur. Ce sont, en audit, les critères les plus fréquemment violés — et souvent les plus faciles et les moins chers à corriger.

Le problème qu’on résout

Le contraste et la couleur sont les angles morts du designer et du dev. On choisit un gris clair « élégant » sur fond blanc, on signale une erreur « en rouge », on fige des tailles en pixels, on oublie l’attribut lang — et sans le savoir, on exclut les personnes malvoyantes, daltoniennes, âgées, ou simplement quelqu’un qui lit son téléphone en plein soleil. La bonne nouvelle : contrairement à un clavier ou à de l’ARIA, ces problèmes se mesurent avec des outils gratuits et se corrigent en changeant quelques valeurs CSS. C’est le meilleur rapport effort/impact de tout le cours.

Ce que tu sauras faire à la fin de cette partie

• Mesurer un ratio de contraste et connaître les seuils AA (4,5:1, 3:1) et AAA (7:1).
• Ne plus jamais transmettre une information par la couleur seule (critère 1.4.1).
• Vérifier le contraste des éléments non textuels : bordures, icônes, focus (1.4.11).
• Concevoir un contenu qui survit au zoom 200 % et au reflow sur mobile (1.4.4, 1.4.10, 1.4.12).
• Déclarer la langue de la page et des passages étrangers (3.1.1, 3.1.2) et soigner la lisibilité.

Les chapitres

On commence : Le contraste du texte.