# Texte sur une image : sept façons de garder les mots lisibles

[Canonical HTML page](https://gradiently.design/fr/guide/text-over-image)

Une photo superbe seule peut avaler n’importe quel titre posé dessus. Ces sept techniques gardent les mots lisibles sans cacher l’image derrière un encadré.

## The short version

- Un texte sur une image est lisible quand la zone juste derrière les lettres est calme et nettement plus claire ou plus sombre que le texte.
- La solution la plus rapide est souvent un meilleur recadrage, qui place les mots sur le ciel, un mur, une ombre ou une autre partie calme de la photo.
- Un voile, c’est-à-dire un dégradé doux du sombre au transparent derrière le texte, garde les mots lisibles tout en laissant presque toute la photo intacte.
- Le duotone, le flou et les voiles colorés calment une photo chargée pour que le texte puisse se placer n’importe où.
- Vérifiez le contraste là où le texte se trouve vraiment, et visez au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte.

Un **texte sur une image** reste lisible quand la zone juste derrière les lettres est calme et nettement plus claire ou plus sombre que le texte. Sept techniques y mènent : recadrer pour que les mots tombent sur une zone calme, ajouter un voile, teinter la photo, la flouter, encadrer le texte, choisir l’encre selon la luminosité, et placer les mots là où le regard se pose déjà. La plupart des bonnes créations en combinent deux, et aucune n’a besoin d’un bloc plein posé sur la photo.

Le même problème se pose avec les dégradés et les fonds à motifs ; [du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) et [le texte sur un fond chargé](https://gradiently.design/fr/guide/type-on-busy-backgrounds) couvrent ces cas. Ce guide se concentre sur les photos.

## Pourquoi le texte disparaît sur les photos

Deux choses rendent les lettres difficiles à lire sur une image : un contraste faible et le détail. Un contraste faible signifie que les lettres sont trop proches en luminosité de ce qui se trouve derrière, comme un texte blanc sur un ciel lumineux. Le détail signifie que le fond a des bords et des textures à la même échelle que les lettres, comme des feuilles, une foule ou un tissu : l’œil ne parvient plus à séparer l’un de l’autre. Chaque technique ci-dessous réduit l’un des deux, ou les deux.

Une publication verticale dont le titre passe sur la partie la plus chargée d’un fond coloré et se lit mal

Des mots posés directement sur un fond chargé : la luminosité et le détail concurrencent les lettres.

La même publication verticale avec un fond calmé et assombri derrière le titre, qui se lit clairement

La même création avec une zone plus calme et mieux contrastée derrière les mots.

## Sept techniques pour un texte lisible sur une image

### 1. Recadrer sur une zone calme

Avant d’ajouter quoi que ce soit, déplacez la photo. La plupart des photos ont une région calme : le ciel, un mur, l’eau, une ombre, un arrière-plan flou. Recadrez ou repositionnez pour que les mots tombent là. C’est la seule technique qui n’ajoute rien, et c’est pourquoi elle paraît la plus nette. Quand vous photographiez pour une création, laissez cet espace exprès.

### 2. Ajouter un voile

Un voile (scrim, en anglais) est un dégradé doux du sombre au transparent, placé uniquement là où se trouve le texte, en général en bas ou en haut de l’image. Il assombrit la zone derrière les mots et s’estompe avant d’atteindre le sujet : la majeure partie de la photo paraît intacte. C’est la technique standard pour les cartes, les images d’en-tête et les miniatures vidéo.

```css
.photo-card {
  position: relative;
  isolation: isolate;
}

.photo-card img {
  position: relative;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim: dark at the bottom, clear by 60% up. */
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72) 0%,
    rgb(0 0 0 / 0.38) 30%,
    rgb(0 0 0 / 0) 60%
  );
}

.photo-card h2 {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.5rem;
  color: #fff;
  text-wrap: balance;
}
```

Un voile en bas avec trois arrêts, pour que le fondu n’ait aucun bord visible. Gardez le point le plus sombre sous les mots, pas sur toute l’image.

### 3. Teinter la photo : duotone ou voile coloré

Ramener une photo à deux couleurs (un [duotone](https://gradiently.design/fr/guide/duotone-effect)) ou poser dessus un voile d’une seule couleur resserre sa plage de luminosité. La photo devient plus calme et plus homogène, et un texte d’une encre contrastée se lit partout. Cela ramène aussi les photos dans les couleurs de votre marque, ce qui est utile quand les images viennent de nombreuses sources.

- Encre des ombres: #1b1340
- Pêche des lumières: #f7c7a3
- Texte sur les ombres: #ffffff
- Texte sur les lumières: #1b1340

Un duo de duotone et ses deux couleurs de texte. Comme la photo ne contient que des tons entre les deux, le blanc se lit sur la moitié sombre et l’encre profonde sur la moitié claire.

### 4. Flouter derrière les mots

Le flou retire le détail fin qui se bat avec les lettres tout en gardant la couleur et la lumière de la photo. Floutez toute l’image pour un fond doux, ou seulement une bande derrière le texte. Floutez assez pour que les bords disparaissent ; un léger flou ressemble simplement à une erreur. [Les arrière-plans flous](https://gradiently.design/fr/guide/blurred-background) expliquent quel dosage utiliser.

### 5. Encadrer le texte

Parfois, la bonne réponse est un espace dégagé : une bande de couleur unie, un panneau, ou une mise en page partagée avec la photo d’un côté et les mots de l’autre. C’est honnête et toujours lisible. Prenez la couleur du cadre dans la photo pour qu’il appartienne à l’image au lieu de la recouvrir.

### 6. Choisir l’encre selon la luminosité

Choisissez entre texte clair et texte foncé selon la luminosité de la zone derrière, pas selon la couleur qui vous plaît. Puis vérifiez : visez au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte, les [niveaux de contraste WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). Prélevez les pixels les plus clairs et les plus sombres derrière les lettres et testez les deux avec un outil comme le [vérificateur de contraste WebAIM](https://webaim.org/resources/contrastchecker/). Une ombre douce, comme `text-shadow: 0 1px 12px rgb(0 0 0 / 0.45)`, peut aider un petit texte, mais elle ne rattrape pas un mauvais cadrage.

### 7. Placer les mots là où le regard se pose

Placez le texte là où la photo guide le regard : le long d’une ligne d’horizon, dans l’espace vers lequel une personne regarde, ou à l’opposé du sujet. Évitez de poser des mots sur des visages, des mains ou le produit, et éloignez-les des bords que les plateformes couvrent de boutons ou recadrent sur certains écrans.

## Quelle technique pour quelle photo

| Photo | Premier choix | Solution de repli |
| --- | --- | --- |
| Zone calme nette, comme un ciel ou un mur | Recadrer dessus | Voile léger pour plus de marge |
| Chargée partout, comme une foule ou un feuillage | Duotone ou voile coloré | Flouter toute l’image |
| Sujet en haut, détail en bas | Voile en bas | Encadrer avec une bande de couleur |
| Lumineuse et très contrastée | Encre foncée sur la zone la plus claire | Voile coloré pour resserrer la plage |
| Nombreuses photos qui doivent rester cohérentes | La même teinte pour toutes | Le même voile pour toutes |

Commencez par l’intervention la plus légère qui fonctionne, et n’en combinez deux que si une seule ne suffit pas.

### À éviter

- Un bloc plein plaqué au milieu de la photo
- Des contours ou halos épais autour de chaque lettre
- Du texte sur un visage ou sur le produit
- Vérifier le contraste uniquement dans l’outil de création

### À faire

- Recadrer d’abord, puis ajouter le moins possible
- Un voile doux qui s’estompe avant le sujet
- Des mots dans l’espace que laisse la photo
- Vérifier en taille réelle sur un téléphone

## Garder le texte sur image cohérent dans toute une marque

Quand plusieurs personnes créent des publications, choisissez une ou deux techniques et notez-les : par exemple, un voile en bas d’une intensité fixe pour chaque publication photo, et un duotone aux couleurs de la marque pour les citations. Dans le Studio de Gradiently, les photos peuvent être recadrées et teintées aux couleurs du Mark en mono, en duotone ou avec un voile coloré, pour que les publications photo appartiennent à la même famille que vos autres créations. Consignez la règle dans votre [charte graphique](https://gradiently.design/fr/guide/brand-style-guide).

## FAQ

### Comment rendre un texte lisible sur une image ?

Placez les mots sur une zone calme et bien contrastée. Recadrez d’abord sur une partie calme de la photo, puis ajoutez un voile, une teinte ou un flou si besoin, et choisissez un texte clair ou foncé selon la luminosité derrière.

### Qu’est-ce qu’un voile (scrim) en design ?

Un voile est un dégradé doux du sombre (ou du clair) au transparent placé derrière le texte sur une image. Il améliore le contraste là où se trouvent les mots tout en laissant l’essentiel de la photo visible.

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

Les WCAG demandent au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Sur une photo, vérifiez les points les plus clairs et les plus sombres derrière les lettres, pas une moyenne.

### Une ombre portée suffit-elle à rendre un texte lisible ?

Rarement à elle seule. Une ombre douce aide un petit texte à se détacher du fond, mais un recadrage calme, un voile ou une teinte font l’essentiel du travail.