# Rendre un texte lisible sur une photo sans encadré

[Canonical HTML page](https://gradiently.design/fr/guide/readable-text-on-photos)

Un aplat derrière le titre fonctionne, mais donne à chaque publication un air de mème. Ces techniques gardent la photo entière et les mots clairs, avec du code pour le web et des réglages pour les publications sociales.

## The short version

- Le moyen le plus fiable de rendre un texte lisible sur une photo est de placer les mots sur la zone la plus calme et la plus régulière de l’image.
- Un dégradé de lisibilité, un fondu doux de transparent à sombre sur un bord de la photo, donne du contraste au texte sans encadré visible.
- Teinter une photo en une ou deux couleurs réduit son contraste et ses détails, ce qui facilite la lecture de tout texte posé dessus.
- Un texte plus gras et plus grand survit bien mieux à une photo chargée qu’un texte fin ou petit.
- Le texte sur photo doit toujours respecter les recommandations de contraste, environ 4,5 pour 1 pour le petit texte et 3 pour 1 pour les grands titres.

Pour **rendre un texte lisible sur une photo** sans le mettre dans un encadré, commencez par le placement : trouvez ou créez la zone la plus calme de l’image et posez-y les mots. Si cela ne suffit pas, ajoutez un **dégradé de lisibilité**, un fondu doux de clair à sombre le long d’un bord, puis réduisez le contraste propre de la photo avec une teinte, et enfin rendez le texte plus gras et plus grand. Utilisées dans cet ordre, ces techniques gardent la photo intacte et les mots clairs. Un encadré est un dernier recours, pas un point de départ.

Cette page traite précisément de l’approche sans encadré. Pour toutes les techniques, y compris encadrés, bandeaux et découpes, voir [le texte sur image](https://gradiently.design/fr/guide/text-over-image).

## Pourquoi le texte se perd sur les photos

Un texte a besoin d’une différence de luminosité entre les lettres et ce qu’il y a derrière. Une photo change constamment de luminosité : une chemise blanche près d’une porte sombre, des feuilles sur le ciel. Partout où une lettre passe du clair au sombre, une partie disparaît. Les détails fins aggravent le problème, car l’œil ne peut pas séparer le bord de la lettre de la texture derrière.

Une publication portrait où le titre passe sur un fond chargé et irrégulier et où des parties des lettres sont difficiles à lire

Le problème sur un fond de Mark : des mots posés directement sur une zone chargée perdent des lettres là où le fond s’éclaircit.

La même publication portrait avec une zone plus calme et plus régulière derrière le titre pour que chaque mot soit lisible

Les mêmes mots avec une zone calme et régulière derrière, l’effet qu’on attend d’un recadrage bien choisi. Pas d’encadré, et chaque lettre se lit.

## Six façons de rendre un texte lisible sur une photo

### 1. Choisir et recadrer pour l’espace vide

La meilleure solution intervient avant d’écrire un mot. Choisissez des photos avec une zone vide : ciel, mur, plateau de table, arrière-plan flou. Puis recadrez pour que cette zone se trouve là où va le titre. Une publication portrait en 1080×1350 vous laisse la place de pousser le sujet vers le bas et de garder le tiers haut calme. Photographiez dans cet esprit si vous le pouvez : reculez et laissez de l’espace au-dessus du sujet. [Le texte sur fonds chargés](https://gradiently.design/fr/guide/type-on-busy-backgrounds) couvre les motifs et textures qui se comportent comme des photos chargées.

### 2. Ajouter un dégradé de lisibilité

Un dégradé de lisibilité est un dégradé posé sur la photo, sombre au bord où se trouve le texte et se fondant jusqu’au totalement transparent. Comme il s’estompe, l’œil le lit comme une lumière qui décroît plutôt que comme une forme. Limitez-le au tiers de l’image qui porte les mots, et utilisez un ton sombre pris dans la photo plutôt que du noir pur.

- Dégradé bas, noir chaud: `linear-gradient(0deg, #0c0a09d9 0%, #0c0a0973 30%, #0c0a0900 60%)`
- Dégradé haut, bleu marine: `linear-gradient(180deg, #0f172acc 0%, #0f172a00 45%)`
- Dégradé latéral, pour du texte à gauche: `linear-gradient(90deg, #1c1917d9 0%, #1c19174d 40%, #1c191700 65%)`

Trois dégradés montrés seuls. Posé sur une photo, chacun n’assombrit que la zone qui porte les mots et s’efface avant le sujet.

### 3. Teinter la photo

Teinter une photo en une ou deux couleurs resserre sa plage de clairs et de sombres, si bien que le texte posé dessus se lit plus facilement partout. Un duotone sombre, comme du bleu profond au lilas doux, marche particulièrement bien derrière du texte blanc ; [l’effet duotone](https://gradiently.design/fr/guide/duotone-effect) montre comment en construire un. La teinte donne aussi à un ensemble de photos disparates l’air d’appartenir à une seule marque.

### 4. Assombrir ou éclaircir localement

La plupart des éditeurs photo permettent de baisser l’exposition ou les hautes lumières dans une zone. Baisser un ciel clair d’un diaphragme, juste derrière le titre, suffit souvent à lui seul et reste invisible pour qui n’a pas vu l’original.

### 5. Rendre le texte plus robuste

Le texte fin et petit est le premier à disparaître. Utilisez une graisse demi-grasse ou grasse, montez d’une taille et ouvrez légèrement l’espacement des lettres sur les petites lignes. Une sans lourde à 110 px tiendra sur une photo là où un empattement léger à 70 px n’y arrivera jamais. [Les polices grasses](https://gradiently.design/fr/guide/bold-fonts) liste des polices fiables.

### 6. Placer la photo à côté des mots

Parfois, la réponse honnête est de ne pas superposer du tout. Recadrez la photo en cercle, en arche ou sur la moitié du cadre et posez les mots sur un fond uni ou en dégradé à côté. La photo reste entière et les mots obtiennent un contraste parfait.

## Quelle technique pour quelle photo

| Photo | Commencez par | Puis |
| --- | --- | --- |
| Ciel dégagé ou mur uni | Le placement | Rien d’autre n’est nécessaire |
| Sujet au milieu, bords chargés | Recadrer pour libérer un bord | Un dégradé sur ce bord |
| Chargée partout (foule, marché, feuillage) | Teinte ou duotone | Un texte plus gras |
| Photo de produit lumineuse, en high key | Un texte foncé sur la zone la plus claire | Baisser localement les hautes lumières |
| Nuit ou intérieur sombre | Un texte blanc sur la zone la plus sombre | Léger dégradé si des lumières croisent les mots |
| Photo détaillée que vous ne pouvez pas modifier | La photo à côté des mots | Une couleur partagée pour les relier |

Commencez par la technique la moins visible et arrêtez-vous dès que la plus petite ligne se lit.

## Comment ajouter un dégradé sur une image en CSS

Sur un site web, superposez le dégradé et la photo dans une seule déclaration `background`. Le dégradé vient en premier pour se placer dessus. Cela garde l’effet en CSS, donc il s’adapte à tout recadrage de la mise en page.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}
```

Un dégradé bas sur une photo de couverture, avec une couleur de secours sombre pour que le texte se lise avant l’arrivée de l’image.

Vérifiez le résultat selon les recommandations de contraste : environ 4,5 pour 1 pour le texte normal et 3 pour 1 pour les grands titres, comme l’expose [le guide de contraste de WebAIM](https://webaim.org/articles/contrast/). Testez le point le plus clair derrière les mots, pas la moyenne. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) explique les chiffres.

## Erreurs à éviter avec du texte sur photo

### À éviter

- Des lueurs ou halos flous autour de chaque lettre
- Un lourd calque noir sur toute la photo
- Une scripte fine sur une scène détaillée
- Placer du texte sur un visage
- Corriger un mauvais recadrage avec des effets de plus en plus forts

### À préférer

- Un dégradé doux sur un seul bord
- Une teinte qui garde l’ambiance de la photo
- Une graisse solide à une taille généreuse
- Des mots dans l’espace à côté du sujet
- Recadrer, ou choisir une autre photo

Les halos et lueurs autour des lettres sont la tentative de sauvetage la plus courante et celle qui fait le plus bon marché. Ils floutent les bords des lettres, soit le contraire de ce que demande la lecture. Si vous êtes tenté, lisez d’abord [les ombres de texte et leurs meilleures alternatives](https://gradiently.design/fr/guide/text-shadow-alternatives).

Dans Gradiently, les photos peuvent être teintées aux couleurs du Mark en mono, en duotone ou en lavis, et recadrées en arches, cercles et formes libres pour se placer à côté des mots. Sur les créations où le Mark transparaît, il place sa zone la plus calme derrière le texte et l’encre Auto choisit un texte clair ou foncé pour chaque ligne, sans encadrés, ombres ni flou.

## FAQ

### Comment faire ressortir un texte sur une photo chargée ?

Placez-le sur la zone la plus calme, ajoutez un dégradé doux sur ce bord, teintez la photo pour réduire son contraste et utilisez une graisse plus forte et plus grande.

### Qu’est-ce qu’un dégradé de lisibilité en design ?

C’est un calque en dégradé qui assombrit ou éclaircit une partie d’une image, en se fondant jusqu’au transparent, pour que le texte placé dessus ait assez de contraste.

### Faut-il utiliser une ombre de texte pour rendre un texte lisible sur une photo ?

Une lueur ou un halo doux fait généralement bon marché et floute les lettres. Le placement, un dégradé ou une teinte donnent des résultats plus nets.

### Quel rapport de contraste faut-il pour un texte sur photo ?

Visez environ 4,5 pour 1 pour le texte normal et 3 pour 1 pour les grands titres, mesurés au point le plus clair derrière les mots.