# Contraste des couleurs : un texte lisible pour tous

[Canonical HTML page](https://gradiently.design/fr/guide/color-contrast-accessibility)

Le contraste, c’est la différence entre des mots que l’on lit et des mots que l’on saute. Les chiffres WCAG en clair, comment les vérifier et ce qui change quand le fond est un dégradé.

## The short version

- Le contraste des couleurs est la différence de luminosité entre un texte et son fond, mesurée par un rapport allant de 1:1 (aucune différence) à 21:1 (noir sur blanc).
- Le niveau AA des WCAG 2 demande au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte, soit environ 24 px en graisse normale ou 18,66 px en gras.
- Les icônes, les bordures de champs et les autres éléments d’interface que l’on doit voir demandent aussi au moins 3:1 par rapport à leur entourage.
- Sur du blanc, `#767676` est le gris uni le plus clair qui passe 4,5:1 pour du texte courant, et `#777777` échoue de justesse.
- Sur un dégradé, le contraste change d’un point à l’autre : il faut donc tester le pire endroit derrière les mots, pas la couleur moyenne.

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](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) et servent de référence à la plupart des audits et des réglementations d’accessibilité.

| Quoi | Niveau AA | Niveau AAA | Remarques |
| --- | --- | --- | --- |
| Texte normal | 4,5:1 | 7:1 | Texte courant, légendes, libellés, boutons |
| Grand texte | 3:1 | 4,5:1 | Au moins 18 pt (environ 24 px), ou 14 pt en gras (environ 18,66 px) |
| Icônes et éléments d’interface | 3:1 | 3:1 | Bordures de champs, lignes de graphique porteuses de sens, icônes sans libellé |
| Logos et décor | Aucun | Aucun | Les logotypes de marque et le texte purement décoratif sont exemptés |

Le niveau AA est la cible habituelle. L’AAA est plus strict et vaut la peine pour la lecture longue.

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.

```js
// 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
```

Le calcul complet tient en une douzaine de lignes. Utile pour vérifier une palette de marque en série.

Inutile de le calculer à la main. Le [vérificateur de contraste WebAIM](https://webaim.org/resources/contrastchecker/) 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.

| Texte sur fond | Rapport | Texte normal | Grand texte |
| --- | --- | --- | --- |
| Blanc sur le violet `#7c3aed` | 5,7:1 | Réussi | Réussi |
| Blanc sur le violet clair `#8b5cf6` | 4,2:1 | Échec | Réussi |
| Blanc sur le bleu `#2563eb` | 5,2:1 | Réussi | Réussi |
| Blanc sur le bleu ciel `#3b82f6` | 3,7:1 | Échec | Réussi |
| Blanc sur le vert `#10b981` | 2,5:1 | Échec | Échec |
| Quasi-noir `#0b0b10` sur le vert `#10b981` | 7,7:1 | Réussi | Réussi |
| Blanc sur l’ambre `#f59e0b` | 2,2:1 | Échec | Échec |
| Gris `#999999` sur blanc | 2,9:1 | Échec | Échec |
| Gris `#6b7280` sur blanc | 4,8:1 | Réussi | Réussi |

Un petit écart peut trancher : deux bleus presque identiques tombent de part et d’autre de 4,5:1.

> **Changez le texte, pas la marque** Quand le blanc échoue sur une couleur de marque vive, essayez un texte quasi noir. Le vert, l’ambre et le corail passent en général sans peine avec une typo sombre, et la couleur reste exactement la même. [Choisir les couleurs de marque](https://gradiently.design/fr/guide/how-to-choose-brand-colors) explique comment l’intégrer à une palette dès le départ.

## 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.

Minuit, violet, rose: `linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%)`

Le texte blanc obtient 18:1 à gauche, 5,7:1 sur le violet et 2,7:1 à l’extrémité rose. Un dégradé, trois verdicts.

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. **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. **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. **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. **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. **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.

```css
.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;
}
```

Le voile n’assombrit que là où le dégradé s’éclaircit : le côté gauche reste intact.

Un post en portrait où le titre Ouverture des portes à sept heures traverse une zone claire du dégradé et devient difficile à lire

Les mots courent sur la partie la plus vive du fond et leur contraste chute.

Le même post en portrait avec une zone plus sombre et plus calme du dégradé derrière le titre, qui se lit clairement

Le même design, avec la région calme et sombre déplacée derrière les mots.

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é](https://gradiently.design/fr/guide/text-on-gradient) et [du texte lisible sur des photos](https://gradiently.design/fr/guide/text-over-image). Pour les interfaces sombres en particulier, voyez [concevoir pour le mode sombre](https://gradiently.design/fr/guide/dark-mode-design).

## FAQ

### Quel est un bon rapport de contraste des couleurs ?

Au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte respectent le niveau AA des WCAG. Pour la lecture longue, 7:1 (niveau AAA) est plus confortable.

### Qu’est-ce qu’un grand texte selon les WCAG ?

Un texte d’au moins 18 points, environ 24 px, ou d’au moins 14 points en gras, environ 18,66 px. Le grand texte n’a besoin que de 3:1 au niveau AA.

### Quel est le gris le plus clair utilisable sur du blanc ?

`#767676` est le gris uni le plus clair qui atteint 4,5:1 sur blanc. `#777777` mesure 4,48:1 et échoue pour du texte courant.

### Les logos doivent-ils respecter les exigences de contraste ?

Non. Les WCAG exemptent le texte qui fait partie d’un logo ou d’un nom de marque, ainsi que le texte purement décoratif. Tout ce que l’on doit lire ou utiliser compte encore.

### Comment vérifier le contraste sur un fond dégradé ?

Mesurez la couleur du texte par rapport au point le plus clair derrière un texte clair, ou au point le plus sombre derrière un texte sombre. Si ce pire point passe, toute la ligne passe.