Contraste des couleurs : un texte lisible pour tous

Le contraste des couleurs est la différence de luminosité entre un texte et la couleur derrière lui, et il décide si l’on peut lire vos mots. Les Web Content Accessibility Guidelines (WCAG) le mesurent par un rapport allant de 1:1, quand les deux couleurs sont identiques, à 21:1, noir sur blanc. Pour le niveau AA, le texte normal demande au moins 4,5:1 et le grand texte au moins 3:1. Tout le reste de ce guide consiste à atteindre ces chiffres sans rendre votre design timide.

Le contraste compte pour tout le monde, pas seulement pour les personnes malvoyantes. Un téléphone en plein soleil, un projecteur faible, un écran bon marché et des yeux fatigués réduisent tous la différence entre les couleurs. Les designs assez contrastés sont simplement mieux lus.

Les rapports de contraste WCAG en clair

Trois règles des WCAG 2 couvrent presque toutes les décisions de design. Elles viennent des critères de succès du W3C et servent de référence à la plupart des audits et des réglementations d’accessibilité.

Deux détails piègent souvent. D’abord, « grand » se rapporte à la taille affichée : un titre de 24 px réduit sur un téléphone peut cesser de compter comme grand. Ensuite, un bouton désactivé est exempté, mais un texte indicatif gris clair que l’on doit comprendre ne l’est pas.

Comment se calcule le rapport de contraste

Le rapport compare la luminance relative des deux couleurs : la quantité de lumière que chacune émet, pondérée comme l’œil la voit. Le vert contribue le plus, le rouge moins et le bleu très peu, c’est pourquoi un bleu saturé peut être étonnamment sombre et un jaune étonnamment clair. La formule est (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire.

// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails

Inutile de le calculer à la main. Le vérificateur de contraste WebAIM prend deux codes hex et indique quels niveaux sont atteints, et le sélecteur de couleur des outils de développement de Chrome affiche le rapport de tout texte inspecté.

Des paires de couleurs qui passent ou échouent

Les couleurs de marque tombent souvent dans un entre-deux gênant, trop sombres pour un texte sombre et trop claires pour un texte blanc. Les verts moyens, les oranges, les roses et les bleus clairs sont les coupables habituels. Voici des associations courantes, avec leurs vrais rapports.

Pourquoi les dégradés compliquent le contraste

Un fond uni a un seul rapport de contraste. Un dégradé en a un différent en chaque point. Un texte blanc qui passe largement sur l’extrémité sombre d’un mélange peut échouer complètement à l’extrémité claire, et un titre qui s’étire sur le dégradé réussit et échoue dans la même ligne.

La règle est simple : testez le point le plus clair derrière un texte clair, ou le point le plus sombre derrière un texte sombre. Si le pire point passe, toute la ligne passe. Les couleurs moyennes et les échantillons de pipette pris au milieu vous tromperont.

Comment corriger le contraste sur un dégradé

1. 1

   Déplacez les mots vers la zone calme

   Placez le texte sur la partie la plus sombre ou la plus claire du dégradé, et laissez la transition vive se produire ailleurs.

2. 2

   Réduisez l’amplitude derrière le texte

   Gardez la partie du dégradé qui se trouve derrière les mots dans une petite plage de luminosité. Le reste du canevas peut être aussi audacieux que vous le voulez.

3. 3

   Ajoutez un voile doux

   Un léger fondu sombre ou clair derrière le texte, comme un dégradé du transparent à 30 % de noir, relève le contraste sans boîte visible.

4. 4

   Voyez plus grand, plus gras

   Le grand texte n’a besoin que de 3:1. Une graisse plus forte et une taille plus grande peuvent faire passer une ligne qui échouait.

5. 5

   Testez sur un vrai téléphone

   Vérifiez le design à pleine luminosité et à faible luminosité, dehors si possible. Les rapports sont un plancher, pas un objectif.

.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}

C’est l’idée derrière la lisibilité de Gradiently : un Mark sait où se trouvent vos mots, place derrière eux sa région la plus calme et la mieux contrastée, et choisit une encre claire ou sombre pour chaque ligne dans sa propre palette. Pour d’autres techniques valables partout, lisez du texte sur un dégradé et du texte lisible sur des photos. Pour les interfaces sombres en particulier, voyez concevoir pour le mode sombre.