Leçon 3 / 6
Leçon 03 · Partie 1 — Comprendre

Couleurs et contrastes

Le problème du texte illisible

Gris clair sur fond blanc. Jaune sur fond blanc. Bleu clair sur fond bleu foncé. Ces combinaisons de couleurs semblent parfois jolies visuellement. Mais pour beaucoup d'utilisateurs, elles sont tout simplement illisibles.

Les personnes malvoyantes, les daltoniens, les personnes qui lisent sur un écran en plein soleil — tous ont besoin d'un contraste suffisant entre le texte et son fond.

💡

1 homme sur 12 est daltonien (environ 8% des hommes). La forme la plus courante : la deutéranopie, qui confond rouge et vert. 1 femme sur 200 est daltonienne.

Le ratio de contraste

Le ratio de contraste est un nombre qui mesure la différence de luminosité entre deux couleurs. Il va de 1:1 (même couleur, aucun contraste) à 21:1 (noir sur blanc, contraste maximal).

Ratios WCAG requis

Niveau AA (recommandé)

→ Texte normal (moins de 18px) : ratio minimum 4.5:1

→ Grand texte (18px+ ou 14px+ en gras) : ratio minimum 3:1

→ Composants UI (bordures de champs, icônes) : ratio minimum 3:1

Niveau AAA (optimal)

→ Texte normal : ratio minimum 7:1

→ Grand texte : ratio minimum 4.5:1

✅

Vise toujours le niveau AA en pratique. Le niveau AAA est difficile à atteindre tout en gardant un design attrayant. AA est le standard professionnel.

Exemples concrets de contrastes

Pour mieux comprendre ce que représentent ces ratios, voici des exemples visuels :

Exemples de contrastes

Texte gris #767676 sur blanc → ratio 4.54:1 ✓ (AA passé de justesse)

Texte gris clair #AAAAAA sur blanc → ratio 2.32:1 ✗ (WCAG AA échoué)

Texte foncé #1A2744 sur blanc → ratio 14.7:1 ✓✓ (excellent)

Blanc sur rose foncé #BE185D → ratio 5.11:1 ✓ (AA passé)

Le daltonisme en pratique

Le daltonisme ne signifie pas voir en noir et blanc. Cela signifie confondre certaines couleurs entre elles. La forme la plus courante confond le rouge et le vert.

Les erreurs courantes liées au daltonisme :

  • Utiliser uniquement le vert/rouge pour signaler succès/erreur sans icône ni texte
  • Des graphiques dont les barres se distinguent uniquement par leur couleur
  • Des boutons dont l'état actif/inactif ne se différencie que par la couleur
Messages d'état — Bonne pratique 
<!-- ✗ Mauvais : seule la couleur distingue succès / erreur -->
<p style="color: green">Formulaire envoyé</p>
<p style="color: red">Erreur dans le formulaire</p>

<!-- ✓ Bon : icône + couleur + texte explicite -->
<p class="success">✓ Formulaire envoyé avec succès</p>
<p class="error">✗ Erreur : le champ email est requis</p>
⚠️

Règle d'or : ne jamais utiliser la couleur seule pour transmettre une information. Toujours accompagner d'une icône, d'un texte ou d'une forme différente. C'est valable pour les formulaires, les graphiques, les états de boutons.

Vérifier les contrastes avec Chrome DevTools

Chrome DevTools intègre un vérificateur de contraste directement dans l'inspecteur. Pas besoin d'installer quoi que ce soit.

  1. Clic droit sur un texte → "Inspecter"
  2. Dans le panneau CSS à droite, clique sur la pastille de couleur du color
  3. Un picker s'ouvre avec le ratio de contraste calculé automatiquement
  4. Des lignes pointillées indiquent les seuils AA et AAA
🔍

Chrome DevTools

Directement intégré. Inspecte un élément → clique sur la couleur → le ratio s'affiche. Gratuit, toujours disponible.

Intégré au navigateur
🌐

WebAIM Contrast Checker

Site web simple : entre deux couleurs hexadécimales, il calcule le ratio et indique si AA/AAA sont passés.

webaim.org/resources/contrastchecker
🎨

Coolors Contrast Checker

Interface plus visuelle. Pratique pour explorer des variantes de couleurs tout en restant accessible.

coolors.co/contrast-checker
👁️

Simulation daltonisme

Chrome DevTools → Menu "..." → Plus d'outils → Rendu → Émulation des déficiences visuelles.

Intégré à Chrome

Les pièges courants du design

Quelques erreurs très fréquentes que même les bons designers commettent :

  • Texte de placeholder trop clair — Les placeholders des champs de formulaire ont souvent un contraste insuffisant.
  • Liens sans soulignement — Si la seule différence entre un lien et du texte normal est la couleur, les daltoniens ne le voient pas.
  • Texte sur image — Une image de fond rend le contraste imprévisible. Ajoute toujours une couche semi-transparente.
  • Focus visible absent — Les contours de focus sont parfois supprimés par CSS pour "raisons esthétiques". On verra ça en leçon 5.
// À retenir
  • Ratio minimum pour le texte normal : 4.5:1 (niveau AA).
  • Ratio minimum pour le grand texte (18px+) : 3:1.
  • 1 homme sur 12 est daltonien. Ne jamais utiliser la couleur seule pour transmettre une info.
  • Chrome DevTools permet de vérifier les contrastes en un clic, sans outil externe.
  • WebAIM Contrast Checker est l'outil de référence pour tester deux couleurs hexadécimales.