Text over an image almost always fails the same way: it looks great on the part of the photo you were watching and disappears over a bright cloud, a white shirt or a highlight. Photos have varying brightness; type needs consistent contrast. Every technique below exists to bridge that gap.

Four Techniques, Best to Worst

  1. Put the text on empty space. The most elegant solution is compositional: shoot or crop so there's sky, wall, road or blurred background where the text goes. No overlay needed, nothing obscured.
  2. Add a scrim. A semi-transparent black (or brand-colored) layer over the whole image, or a gradient that's dark at the bottom and clear at the top. 40–60% opacity is usually enough. This is what almost every streaming service and news site uses, because it works on *any* photo.
  3. Use a solid text panel. A filled box or band behind the text. Extremely legible, slightly heavier visually — good for prices, badges and calls to action.
  4. Outline or drop shadow on the text itself. Effective and used by subtitles everywhere, but easy to overdo. A tight, soft shadow (small offset, moderate blur, 50–70% opacity) reads as professional; a hard black outline reads as a 2005 meme unless you're deliberately making one.

Avoid relying on a colored font alone to fix contrast — a photo will eventually contain that color.

Size and Placement Numbers

  • Headline text: 6–10% of the image height. On a 1080 px tall image, that's roughly 65–108 px — much larger than people expect, but images are viewed small.
  • Body/caption text: 3–4% of image height; below that it becomes unreadable in a feed.
  • Margins: keep text at least 5% of the width away from every edge, and further if the image will be cropped by a platform.
  • Safe zone: assume any social platform may crop your image to a different ratio. Keep text within the central 80% so it survives.

The Contrast Floor

Aim for a contrast ratio of at least 4.5:1 between text and the pixels immediately behind it (3:1 for very large text). This is the accessibility standard, but it doubles as a design rule: text that passes contrast is text that survives small screens, sunlight and low-quality displays. The safest combination remains near-white text on a darkened area, or near-black text on a light one.

Two Format Notes

  • Text has hard, high-contrast edges — exactly what JPEG compression handles worst. If your image is mostly text, export PNG; if it's a photo with a headline, JPEG at quality 85+ is fine but don't push lower.
  • Baked-in text can't be translated, searched or read by screen readers. On a website, real HTML text over a background image is better for both SEO and accessibility; bake text in only for social cards, memes and other places where you can only supply a picture.