# Du texte sur un fond chargé, sans encadré

[Canonical HTML page](https://gradiently.design/fr/guide/type-on-busy-backgrounds)

Les solutions habituelles sont un panneau sombre, une ombre portée ou un flou. Chacune fonctionne, et chacune se voit. Il existe une façon plus discrète de rendre les mots lisibles.

## The short version

- Un texte sur un fond chargé est difficile à lire parce que le contraste change d’une lettre à l’autre et que les contours du fond concurrencent la forme des lettres.
- Encadrés, voiles, ombres et flous rendent tous le texte lisible, mais chacun couvre une partie du fond et change l’impression que donne la création.
- Placer les mots sur la zone la plus calme et la plus uniforme du fond est la solution qui coûte le moins à la création.
- Choisir une encre claire ou foncée pour chaque ligne, selon ce qui se trouve réellement derrière, garde chaque ligne lisible sur un fond qui passe du clair au sombre.
- Un fond qui se réorganise autour des mots, en se calmant et en s’approfondissant derrière eux, peut rendre un texte lisible sans aucune pièce visible.

Rendre lisible un **texte sur fond chargé** tient à deux choses : ce qui se trouve juste derrière les lettres, et la couleur des lettres. Les solutions courantes, un encadré, une ombre ou un flou, changent ce qui est derrière les lettres en le recouvrant. Les meilleures solutions placent les mots là où le fond est déjà calme, choisissent l’encre de chaque ligne et, quand l’outil le permet, laissent le fond faire de la place au lieu d’être rapiécé.

Un titre posé directement sur une texture de dégradé détaillée, avec des lettres en concurrence avec le fond

Laissé tel quel : la texture traverse les mots.

Le même titre et la même texture, avec la partie la plus calme du fond déplacée derrière les mots

En faisant de la place : la partie calme de la texture se place derrière eux.

## Pourquoi fonds chargés et texte se font la guerre

La lecture dépend du contraste entre chaque lettre et ce qui l’entoure. Sur une couleur unie, ce contraste est le même partout. Sur une photo, un motif ou un dégradé animé, il change sans cesse : une lettre repose sur une zone claire, la suivante sur une ombre, et le mot se brise en morceaux. Le détail aggrave les choses, car les contours et formes du fond ressemblent un peu à des traits de lettres, et l’œil doit séparer les deux.

C’est pourquoi les recommandations de contraste, comme les rapports présentés dans [le contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility), sont difficiles à appliquer sur un fond chargé : il n’y a pas une seule couleur de fond à mesurer. Le test honnête est le pire endroit, la zone la plus claire derrière un texte clair ou la plus sombre derrière un texte foncé.

## Les solutions habituelles, et ce que chacune coûte

Chaque solution classique fonctionne en changeant ce qui se trouve juste derrière les lettres. Toutes sont légitimes, et toutes retirent quelque chose au fond que vous avez choisi.

| Solution | Comment elle fonctionne | Ce qu’elle coûte |
| --- | --- | --- |
| Encadré plein | Un panneau de couleur unie derrière le texte | Couvre le fond ; ressemble à une étiquette |
| Panneau translucide | Un encadré transparent qui assombrit ou éclaircit | Salit les couleurs dessous ; le bord se voit |
| Voile | Un dégradé doux qui s’assombrit derrière le texte | Assombrit tout un côté de l’image |
| Ombre portée | Un halo sombre autour de chaque lettre | Fait daté si elle est lourde ; salit la couleur |
| Zone floutée | Floute le fond derrière les mots | Fait inachevé ; annonce où va le texte |
| Contour | Un trait contrasté autour de chaque lettre | Change le caractère de la police |

Six solutions courantes. Chacune fonctionne ; chacune se voit.

Si vous en utilisez une, faites-le avec douceur. Un voile qui s’estompe sur une grande surface se remarque moins qu’un encadré, et une ombre douce et large fait moins datée qu’une ombre dure. Voici une version retenue pour le web :

```css
.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}
```

Un voile et une ombre discrets. Vérifiez le résultat avec un outil de contraste comme [celui de WebAIM](https://webaim.org/resources/contrastchecker/) au point le plus clair derrière le texte.

## Mieux : placer les mots là où le fond est calme

La plupart des fonds chargés ont une région plus calme : un pan de ciel, une nappe de couleur douce, une zone floue. Y déplacer le texte, ou recadrer pour que cette région tombe là où va le texte, règle le problème sans rien couvrir. Quand vous choisissez ou créez un fond, cherchez-en un qui a une zone calme là où vos mots se placent d’habitude.

- Chargé : le texte va lutter: `repeating-linear-gradient(45deg, #1d3557 0px, #1d3557 12px, #e63946 12px, #e63946 24px, #f1faee 24px, #f1faee 36px)`
- Une nappe calme au centre: `radial-gradient(ellipse at 50% 50%, #f1faee 0%, #a8dadc 35%, #457b9d 70%, #1d3557 100%)`

Les trois mêmes couleurs, deux fonds très différents pour des mots. Les rayures donnent à chaque lettre un fond différent ; un champ radial offre au centre une nappe claire et uniforme où un texte foncé se lit nettement.

La même idée vaut pour les photos, où le recadrage, le flou et le duotone peuvent tous créer du calme ; [texte sur une image](https://gradiently.design/fr/guide/text-over-image) passe en revue sept techniques. Sur un dégradé, la zone calme est en général là où la couleur change le plus lentement ; [du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) montre comment la trouver.

## Choisir l’encre de chaque ligne

Un fond qui va du clair au sombre ne peut pas être servi par une seule couleur d’encre. Un texte blanc se lit sur la moitié sombre et disparaît sur la moitié claire. Au lieu d’imposer un panneau derrière, choisissez l’encre ligne par ligne : encre claire là où le fond derrière la ligne est sombre, encre foncée là où il est clair. Prenez les deux encres dans la palette du fond, un ton profond et un ton pâle, pour qu’elles fassent partie de la création au lieu d’avoir l’air collées.

### Une encre pour tout

- Un titre blanc sur un champ clair et sombre
- La moitié des lettres perd son contraste
- Un encadré ajouté pour rattraper
- Le fond disparaît sous l’encadré

### Une encre choisie par ligne

- Chaque ligne vérifiée face à ce qui est derrière
- Encre claire sur les zones sombres, foncée sur les claires
- Les deux encres tirées de la palette du fond
- Aucune pièce nécessaire

## Faire bouger le fond, pas les mots

La solution la plus discrète de toutes est un fond qui sait où sont les mots. C’est ainsi que se comporte un Mark Gradiently : au lieu d’être recouvert, il se réorganise. Toute la matière glisse pour que sa région la plus calme et la mieux contrastée se place derrière le texte ; près des lettres, les couleurs s’approfondissent sous un texte clair et s’éclaircissent sous un texte foncé ; les reliefs chargés se détendent. Rien de tout cela n’est une forme que l’on peut montrer du doigt. Cela se lit comme la création, parce que c’est la création.

L’autre moitié, c’est l’encre. Réglez le texte sur **Encre automatique** et chaque ligne choisit l’encre claire ou foncée qui se lit le mieux face à ce qui se trouve réellement derrière elle, dans une paire tirée de la palette du Mark. Déplacez un titre d’une zone lumineuse vers une zone sombre et il bascule en silence. Vous décidez de l’intensité de la réaction du fond : à peine perceptible, équilibrée, ou une vraie scène pour un titre qui doit marquer.

> La meilleure solution de lisibilité est celle que personne ne remarque.

## Une liste de contrôle pour du texte sur fond chargé

1. **Trouvez d’abord la zone calme** Placez ou recadrez pour que les mots reposent sur la partie la plus uniforme du fond.
2. **Vérifiez le pire endroit** Testez le contraste au point le plus clair derrière un texte clair ou le plus sombre derrière un texte foncé, pas en moyenne.
3. **Choisissez l’encre par ligne** Clair sur sombre, sombre sur clair, les deux tirés de la palette du fond.
4. **Jouez sur la graisse et la taille** Une typographie plus grasse et plus grande résiste aux fonds chargés. Les graisses très fines, non. [Les polices pour les réseaux sociaux](https://gradiently.design/fr/guide/fonts-for-social-media) propose des caractères qui tiennent.
5. **Ne rapiécez qu’en dernier recours** S’il le faut, choisissez la solution la plus douce : un voile léger plutôt qu’un encadré, une ombre large et pâle plutôt qu’une ombre dure.

## FAQ

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

Placez les mots sur la partie la plus calme du fond, choisissez une encre claire ou foncée pour chaque ligne selon ce qui est derrière, et utilisez une graisse plus forte et une taille plus grande. N’ajoutez un voile léger que si cela ne suffit pas.

### Une ombre portée est-elle un bon moyen de rendre un texte lisible ?

Une ombre douce, large et pâle peut aider. Une ombre dure et lourde fait daté et salit la couleur : utilisez-la avec parcimonie.

### Comment vérifier le contraste sur un fond chargé ?

Mesurez au pire endroit, comme la zone la plus claire derrière un texte clair, plutôt que sur la couleur moyenne. Un outil de contraste donne le rapport pour cette paire.

### Qu’est-ce que l’Encre automatique dans Gradiently ?

L’Encre automatique choisit un texte clair ou foncé pour chaque ligne dans la palette du Mark, selon ce qui se trouve réellement derrière cette ligne, et bascule si le texte se déplace.