Text Over a Photograph

Why this fails differently from ordinary contrast

Text on a solid colour either passes or fails, once, and the answer is the same for everybody.

Text on a photograph passes in one part of the image and fails in another, and which part the text sits over changes with the screen width.

On a phone the image crops, so the text that was over a dark tree is now over a bright sky.

So this cannot be checked once and declared fine, which is why it survives on sites that have otherwise been through a contrast audit.

Where the hero image goes wrong

• The crop changes on a phone.
• The bright area moves under the text.
• Sunlight washes out the difference.
• A different photograph gets swapped in.
• Nobody rechecks after either.

The fourth is the one that undoes previous work. Somebody replaces the header photograph with a nicer one a year later, and the carefully chosen text position is now over a white wall.

The overlay is the answer

Which is what everybody who does this professionally uses.

A semi-transparent dark layer sitting between the photograph and the text, covering the whole image or fading in from one side.

That guarantees a consistent background for the text regardless of what the photograph does or how it crops.

It also survives somebody swapping the image, which is the durable part.

A gradient, dark at the bottom and clear at the top, is the usual arrangement and keeps most of the photograph visible.

Ask for it by name and any developer will know exactly what you mean.

A drop shadow is not enough

Since it is the common shortcut.

A shadow behind white text helps a little on a mid-tone and does nothing on a bright area.

It also tends to look dated and makes the text slightly harder to read even where it works.

The same applies to a thin outline round each letter, which is worse.

Where the shadow is strong enough to genuinely solve the problem, it is effectively an overlay in the shape of the letters and looks it.

Use a proper overlay instead, which is simpler and works.

A worked example

A business had a header photograph of a completed job with their name and a line of text over it in white.

On a desktop it sat over a dark roof and looked good.

On a phone the image cropped to the centre, putting the text over a bright sky, where it was almost invisible.

Nobody had looked at the home page on a phone since the site was built.

Adding a dark gradient across the lower half fixed it at every width and took their developer ten minutes.

The photograph is still clearly visible, which was the concern.

Moving the text off is also legitimate

And frequently better.

A photograph at full width with the heading and text immediately below it is easier to read, faster to load in a usable state, and impossible to break by swapping the image.

It is less fashionable and it works.

For a trade whose photographs are the selling point, letting the photograph be a photograph rather than a background is arguably the better use of it.

Consider this before commissioning an overlay, since it costs less to build and has fewer ways to go wrong later.

Keep the text out of the image file

Which is the related failure worth mentioning.

Text that is part of the photograph itself cannot be enlarged, selected, read aloud, or translated.

It also becomes blurry when scaled and is invisible to search.

Any words on your header should be real text sitting over the image, never baked into it.

Check by trying to select the words with your cursor, which is the same two-second test as for documents.

Check it at three widths

Since that is where the failures live.

Your desktop, a narrow browser window, and an actual phone.

The middle one is where most people never look and where the crop is usually most awkward.

Then look at the phone outdoors, which is the real condition for a trade's customers.

Four checks, two minutes, and repeat them any time somebody changes the photograph.

Add that to whatever note you keep about site changes, since this is the classic thing that gets quietly undone.

The same applies to text on a video

Which is the version of this that appears on newer sites and is worse.

A moving background means the area behind the text changes several times a second, so it is legible one moment and not the next.

No amount of choosing a good frame helps, since the frame you chose is on screen for a fraction of a second.

An overlay is not optional there, it is the only thing that makes the text readable at all, and it needs to be stronger than one over a still image.

The better answer for most small businesses is not to put text over video, since the cost in loading time is already high and the legibility problem is unsolvable in principle.

The counter-case

Overlays dull the photograph.

A business whose header image is genuinely the selling point loses something by darkening it, which is a real trade rather than an imaginary one.

Some photographs are also uniformly dark enough that white text works everywhere, and adding an overlay to those achieves nothing.

And a header with no text over it at all has none of these problems whatsoever.

Add a gradient overlay, or move the text below the image, and check it at three widths whenever the photograph changes.

The check

1. Look at your header on a phone.
2. Narrow the browser and look again.
3. Try selecting the words.
4. Add a gradient overlay.
5. Or move the text below.
6. Avoid drop shadows as the fix.
7. Recheck when the image changes.

Step seven is the one that keeps it fixed, since the usual way this returns is somebody swapping in a better photograph a year later and nobody checking the text on it.

Whether the image is doing anything at all is covered in the hero image nobody looks at.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.