Text over image: seven ways to keep words readable

Text over image stays readable when the area directly behind the letters is calm and clearly lighter or darker than the text. Seven techniques get you there: crop so the words fall on a quiet area, add a scrim, tint the photo, blur it, frame the text, choose the ink by lightness, and place words where the eye already rests. Most good designs combine two of them, and none needs a solid box over the photo.

The same problem appears with gradients and patterned backgrounds; text on a gradient and type on busy backgrounds cover those cases. This guide focuses on photos.

Why text disappears on photos

Two things make letters hard to read on an image: low contrast and detail. Low contrast means the letters are too close in lightness to what sits behind them, like white text over a bright sky. Detail means the background has edges and textures at the same scale as the letters, like leaves, crowds or fabric, so the eye can't separate one from the other. Every technique below reduces one or both.

Seven techniques for readable text over images

1. Crop to a calm area

Before adding anything, move the photo. Most photos have a quiet region: sky, a wall, water, shadow, a blurred background. Crop or reposition so the words fall there. This is the only technique that adds nothing, which is why it looks the cleanest. When shooting for a design, leave that space on purpose.

2. Add a scrim

A scrim is a soft gradient from dark to transparent, placed only where the text sits, usually at the bottom or top of the image. It darkens the area behind the words and fades out before it reaches the subject, so most of the photo looks untouched. It is the standard technique for cards, hero images and video thumbnails.

.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. Tint the photo: duotone or a wash

Mapping a photo to two colours (a duotone) or laying a single colour wash over it compresses its range of lightness. The photo becomes calmer and more consistent, and text in a contrasting ink reads anywhere on it. It also brings photos into your brand colours, which is useful when images come from many sources.

4. Blur behind the words

Blur removes the fine detail that fights with letters while keeping the photo's colour and light. Blur the whole image for a soft background, or blur only a band behind the text. Use enough blur that edges disappear; a slight blur just looks like a mistake. Blurred backgrounds covers how much to use.

5. Frame the text

Sometimes the right answer is a clear space: a band of solid colour, a panel, or a split layout with the photo on one side and words on the other. It is honest and always readable. Take the frame's colour from the photo so it belongs to the image rather than covering it.

6. Choose the ink by lightness

Decide between light and dark text by the lightness of the area behind it, not by the colour you like. Then check it: aim for at least 4.5:1 for normal text and 3:1 for large text, the WCAG contrast levels. Sample the lightest and darkest pixels behind the letters and test both with a tool such as the WebAIM contrast checker. A soft shadow, such as text-shadow: 0 1px 12px rgb(0 0 0 / 0.45), can help small type, but it can't rescue a bad crop.

7. Place words where the eye rests

Put text where the photo leads the eye: along a horizon, in the space a person is looking into, or opposite the subject. Avoid placing words across faces, hands or the product, and keep them away from edges that platforms cover with buttons or crop on some screens.

Which technique to use for which photo

Keeping text over images consistent across a brand

When several people make posts, choose one or two techniques and write them down: for example, a bottom scrim at a set strength for every photo post, and a duotone in brand colours for quotes. In Gradiently's Studio, photos can be cropped and tinted in the Mark's colours as mono, duotone or a wash, so photo posts sit in the same family as the rest of your designs. Record the rule in your brand style guide.