Making words readable on a photograph

The problem, precisely

A headline over a photograph is legible only where it has enough contrast against what is behind it. A photograph has varying tone, so a single-colour headline is high-contrast in some places and invisible in others: typically the light letters that pass over a bright cloud.

This is a measurable property, not a matter of taste. The accessibility threshold widely used for text is a contrast ratio of 4.5:1 for normal text and 3:1 for large text, where large means roughly 24px or 19px bold and up. Below those, a meaningful share of readers cannot read it, including anyone in bright sunlight on a phone.

Generate the surface first

The cheapest fix happens before the image exists, and the brief block set it up: prompt for quiet space where the type goes. A plain overcast sky, a wall, a dark background, a shallow depth of field that reduces the background to smooth tone.

An image generated with a place for the headline needs none of the remedies below. Most images are not, which is what the rest of this lesson is for.

The remedies, in order of preference

1. Move the type. Look for the quietest area of the frame and put the words there. Free, and usually improves the composition.

2. A gradient scrim. A soft black-to-transparent gradient over the region behind the type, at 40 to 70% opacity. Nearly invisible as a device and it works. This is what most well-designed posters and streaming thumbnails do.

3. Darken or lighten the whole image behind. A global exposure change to the area, which reads as a deliberate grade rather than an overlay.

4. A solid or semi-transparent panel. Explicit, very legible, and a design decision: it will look like a panel, so it should look deliberate.

5. Blur the region behind. A strong blur on the area under the type. Reads naturally as depth of field if the rest of the image supports it.

6. Outline or drop shadow on the type. Last resort. A tight, subtle shadow can work; a hard outline reads as amateur work and is the most common mistake in this whole area.

Measuring rather than guessing

Do not judge contrast by eye: the eye adapts and you have been staring at the image.

Sample the brightest pixel behind light type and the darkest behind dark type; those are where it fails. Any free web contrast checker takes two hex values and returns the ratio. If the worst point clears 4.5:1, the headline clears everywhere.

For type over a photograph, this takes thirty seconds and settles an argument that otherwise runs on opinion.

Choices that help

• Weight over size. A medium or bold weight is far more legible over a busy background than a light weight at a larger size.
• Avoid thin and high-contrast typefaces over photographs. A Didone with hairline strokes disappears into any texture.
• Fewer words. A six-word headline can be set large enough to survive. A sentence cannot.
• Test at the delivered size. Type that reads on your monitor at 100% may be unreadable as a 400-pixel feed thumbnail.

Where the type is set

Not in the generator, as the repair block established. Inkscape for anything going to print, GIMP or Krita for raster work, Scribus for multi-page layout, Photopea in a browser. All free, all with proper typographic control over tracking, leading and alignment.

Deliver the layered file as well as the flattened image so the headline can be changed later without regenerating anything.

The judgement this does not replace

Contrast ratios tell you whether words can be read. They say nothing about whether the type belongs to the picture: whether its weight suits the image’s weight, whether it sits where the composition wants it, whether the whole thing is any good.

That is design, and the design-foundations course in this catalogue covers hierarchy, spacing and alignment properly. What this lesson gives you is the floor: a headline that clears 4.5:1 at its worst point is legible, and one that does not is broken regardless of how attractive it looks on your screen in a dim room.