# Fond pour du texte : ce qui rend les mots faciles à lire

[Canonical HTML page](https://gradiently.design/fr/guide/gradient-background-for-text)

Certains fonds portent les mots sans effort, d’autres combattent chaque lettre. La différence tient à trois propriétés que vous pouvez vérifier en une minute.

## The short version

- Un bon fond pour du texte réunit trois propriétés là où se trouvent les mots : assez de contraste, peu de détails fins et une plage de tons étroite.
- Les WCAG demandent un rapport de contraste d’au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte.
- Des détails à peu près de la taille des lettres, comme un feuillage, une foule ou des motifs chargés, nuisent plus à la lecture que la couleur.
- Plisser les yeux devant une création, la flouter ou la voir en niveaux de gris montre vite si la zone de texte est assez calme.
- Déplacer les mots vers une partie plus calme du fond vaut généralement mieux qu’ajouter un encadré ou une ombre derrière eux.

Un bon **fond pour du texte** réunit trois choses dans la zone derrière les mots : un fort contraste avec les lettres, très peu de détails fins, et une plage de tons homogène plutôt que des taches claires et sombres. La couleur compte bien moins qu’on ne le pense. Un dégradé violet peut porter un texte magnifiquement et une photo grise peut le ruiner, selon ces trois propriétés. Ce guide montre comment juger n’importe quel fond, photo, dégradé ou texture, et quoi faire quand il échoue.

## Le contraste : la première propriété

Le contraste est la différence de luminosité entre les lettres et ce qui se trouve juste derrière elles. Les règles pour l’accessibilité des contenus web (WCAG) fixent le seuil mesurable : un rapport d’au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le [vérificateur de contraste de WebAIM](https://webaim.org/resources/contrastchecker/) le calcule pour n’importe quelle paire de couleurs.

| Texte | Fond | Rapport de contraste | Verdict |
| --- | --- | --- | --- |
| Blanc `#ffffff` | Indigo profond `#1e1b4b` | 16:1 | Excellent à toutes les tailles |
| Blanc `#ffffff` | Violet `#7c3aed` | 5,7:1 | Valide pour le texte courant |
| Blanc `#ffffff` | Ardoise `#64748b` | 4,8:1 | Valide de justesse |
| Blanc `#ffffff` | Rose `#f472b6` | 2,6:1 | Échoue, même en grand texte |
| Quasi-noir `#1a1a1a` | Rose `#f472b6` | 6,6:1 | Valide : même rose, encre plus foncée |
| Blanc `#ffffff` | Orange `#fb923c` | 2,3:1 | Échoue |

De vrais rapports pour des associations courantes. Les roses, oranges, jaunes et sarcelles clairs vifs demandent un texte foncé, même si le texte blanc semble leur aller.

Sur une couleur unie, une seule vérification suffit. Sur un dégradé ou une photo, le fond change sous chaque mot, alors vérifiez le point le plus clair derrière un texte clair et le point le plus sombre derrière un texte foncé. C’est là que le texte échoue en premier. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) approfondit les normes.

## Le détail : pourquoi les fonds chargés sont difficiles à lire

Le contraste est nécessaire mais pas suffisant. Un fond rempli de détails de la même taille que les lettres rend la lecture difficile même quand le rapport est valide, car l’œil n’arrive pas à séparer la forme des lettres des formes derrière elles. Feuilles, gravier, foules, fines rayures et petits motifs sont les pires coupables. Les grandes formes douces sont les meilleures : un ciel, un mur flou, un dégradé lisse.

- Lisse : porte bien le texte: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Lumière douce : texte en bas à gauche: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Fines rayures : combat chaque lettre: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Petits anneaux : illisible: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

Les deux mêmes couleurs de quatre façons. La paire du haut porte les mots facilement ; celle du bas a des détails à l’échelle des lettres et rend tout texte pénible.

Une texture ne pose pas de problème quand son grain est bien plus petit que les lettres, comme le grain d’une pellicule ou la texture d’un papier. Elle en pose quand ses éléments approchent la taille des traits de vos caractères. Si vous tenez à un motif, agrandissez-le jusqu’à ce que ses formes soient nettement plus grandes que les lettres, ou gardez-le loin des mots. [Du texte sur des fonds chargés](https://gradiently.design/fr/guide/type-on-busy-backgrounds) détaille les motifs, et [du texte lisible sur des photos](https://gradiently.design/fr/guide/readable-text-on-photos) traite des images.

## La plage de tons : zones claires et sombres sous une même ligne

La troisième propriété est celle qui piège le plus. Si une même ligne de texte traverse à la fois une zone claire et une zone sombre, aucune couleur de texte unique ne peut fonctionner : le blanc disparaît sur la partie claire et le noir sur la partie sombre. Un bon fond pour du texte garde une plage de tons étroite sous chaque ligne, toute claire ou toute sombre.

Une publication portrait où le titre traverse des zones claires et sombres d’un dégradé et devient en partie difficile à lire

Le titre traverse des zones claires et sombres du fond, donc certaines lettres disparaissent quelle que soit la couleur de l’encre.

La même publication avec une zone calme et de ton homogène du dégradé derrière le titre, pour que chaque lettre se lise

Le même fond avec une zone homogène et plus profonde derrière les mots. Une seule couleur d’encre fonctionne désormais pour chaque lettre.

## Comment tester n’importe quel fond pour du texte

1. **Plissez les yeux** Fermez les yeux à moitié. Les détails s’estompent et seuls les tons restent. Si les mots se fondent dans le fond, le contraste est trop faible.
2. **Floutez-le** Appliquez un flou important sur une copie du fond seul. Ce qui reste sous la zone de texte est le ton sur lequel reposent vraiment les lettres.
3. **Regardez-le en niveaux de gris** La couleur peut vous faire croire que le contraste suffit. Les niveaux de gris montrent la seule luminosité, dont dépend la lisibilité.
4. **Vérifiez les extrêmes** Mesurez le contraste aux points les plus clairs et les plus sombres derrière les mots, pas en moyenne.
5. **Regardez-le sur un téléphone** À bout de bras, en plein jour, à la taille à laquelle on le verra vraiment.

## Corriger un fond qui combat le texte

La plupart des corrections ajoutent quelque chose : un encadré, une ombre, une bande sombre. Elles fonctionnent, mais chacune est un pansement qui donne à la création un air de sauvetage. Essayez les corrections dans cet ordre, de la moins visible à la plus visible.

### À essayer d’abord

- Déplacer les mots vers la partie la plus calme du fond
- Recadrer ou repositionner le fond pour placer une zone calme derrière eux
- Changer d’encre : texte foncé sur zones claires, clair sur zones sombres
- Agrandir et épaissir les caractères
- Assombrir ou éclaircir le fond uniquement autour des mots

### Avec parcimonie

- Encadrés ou bandes pleines derrière le texte
- Ombres portées sur les lettres
- Contours autour des lettres
- Flou important sur toute l’image
- Un voile sombre sur tout le fond

Sur le web, un léger dégradé superposé d’un côté d’une image d’en-tête est une version honorable de la cinquième correction : il assombrit uniquement la zone sous les mots et laisse le reste de l’image intact.

```css
.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}
```

Assombrit le côté gauche, où se trouve le titre, et s’estompe complètement à 70 % de la largeur. Vérifiez le contraste au point le plus clair derrière le texte.

Gradiently intègre les corrections les moins visibles dans le fond lui-même. Un Mark sait où sont vos mots : sa zone la plus calme et la mieux contrastée se place derrière le texte, les couleurs proches des lettres s’assombrissent ou s’éclaircissent, les détails chargés s’apaisent, et l’encre automatique choisit un texte clair ou foncé pour chaque ligne dans la palette du Mark. Ni encadrés, ni ombres, ni flou, et vous choisissez l’intensité de la réaction. [Comment fonctionne l’encre automatique](https://gradiently.design/fr/guide/auto-ink-legibility) en donne les détails, et [du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) présente la méthode manuelle pour n’importe quel dégradé.

## FAQ

### Quelle est la meilleure couleur de fond pour du texte ?

Toute couleur qui contraste fortement avec le texte, au moins 4,5:1 pour le texte normal. Les fonds très clairs ou très sombres sont les plus faciles ; les tons moyens vifs comme le rose, l’orange et le jaune demandent un texte foncé.

### Quel rapport de contraste faut-il pour du texte ?

Les WCAG demandent au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte.

### Pourquoi mon texte est-il difficile à lire alors que le contraste est valide ?

Le fond a probablement des détails proches de la taille des lettres, ou des zones claires et sombres sous une même ligne. Déplacez les mots vers une zone plus calme et plus homogène.

### Comment rendre un texte lisible sur un fond chargé ?

Déplacez d’abord les mots vers la zone la plus calme ou recadrez l’image. Si ce n’est pas possible, assombrissez ou éclaircissez uniquement la zone derrière le texte, et gardez encadrés et ombres en dernier recours.

### Le texte blanc ou noir est-il plus lisible sur une couleur ?

Cela dépend de la luminosité de la couleur. Les couleurs sombres demandent un texte blanc ; les couleurs claires et vives se lisent généralement mieux avec un quasi-noir.