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

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é et le texte sur un fond chargé 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.

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.

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

3. Teinter la photo : duotone ou voile coloré

Ramener une photo à deux couleurs (un duotone) 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.

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

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.