A practical guide
Putting words over a photo is the most common move in web design. It is also where readability quietly falls apart. Here is the theory, shown one image at a time, so the text on your homepage works for every visitor.
Black Sheep Creative · 7 min read
Your hero section is the first thing a visitor sees. It carries your main headline, a line of supporting copy, and a button. The job of that text is simple: be read in a couple of seconds.
The trouble starts when you drop it onto a photo. Photos are busy. They have light bits, dark bits, and texture. White text vanishes against a bright sky. Dark text disappears into a shadow. The headline you spent an hour wording becomes a smudge.
This guide walks through the fixes using one beach photo throughout. We have deliberately not designed these for polish. The point is the theory: why each approach works, when it works, and when it does not.
Before anything else
Most readability problems are baked in the moment you pick the photo. The best thing you can do is choose an image that already has room for your words. When you are searching a stock library or briefing a photographer, look for four things.
Negative space
A calm, empty area such as sky, water, or a plain wall. Your text sits there with nothing competing behind it.
An even tone in that space
Consistently dark or consistently light. One text colour can then work across the whole headline instead of fighting the background.
Subject off to one side
If the focal point sits left or right, the other side is free real estate for your message.
Holds up when cropped
A hero gets cropped hard on mobile. Check the calm area still exists once the sides are chopped off on a phone.
Get the image right and the rest is easy. Every technique below is really a patch for an image that did not give you enough room. A good photo means you need fewer of them.
One photo, six treatments
A foggy beach with a soft, even sky. We will start with it working, watch one change break it, then walk through four ways to bring the text back.
The baseline
An image that gives you room
That pale sky is exactly the kind of calm space we want. Dark text on it reads cleanly with no extra work. This is the starting point everything else is measured against.
The fail
Same photo, wrong text colour
Now watch it break. Same photo, but the text is white. White on a pale, foggy sky has almost nothing to push against. Nothing changed except the colour of the type, and that was enough to ruin it.
Change the text colour
The simplest fix
Match your text colour to the background. Light photo, dark text. Switching from white to near-black brings the words straight back to life.
The catch. This only holds when the area behind your text is one even tone. Picture a forest scene with bright sky breaking through dark trees, right where your headline sits. Dark text reads over the bright gaps and vanishes against the trees. Light text does the opposite. No single colour wins, because the background fights you in two directions at once. When the background is busy like that, colour alone cannot save you.
Add a contrasting overlay
The workhorse for busy photos
An overlay is a semi-transparent layer of colour between the photo and the text. A dark overlay lets light text pop. It does not care what is underneath: light sky, dark trees, busy texture all flatten to a consistent base.
The trade-off. You are dimming the photo you chose. A heavy overlay can mute a beautiful image. A gradient overlay, darker where the text sits and clear where it does not, is often the best of both worlds.
Outline or shadow on the text
Treat the type, not the photo
A subtle drop shadow or thin outline gives each letter its own edge. That edge separates the type from whatever is behind it, so the words hold their shape over light and dark patches alike. Best of all, the photo stays untouched.
The trade-off. Easy to overdo. A heavy outline or hard shadow looks dated and cheap fast. Keep it subtle. This works as a light touch over a slightly tricky background, not a rescue for a truly chaotic image.
Put the text in a box
The safe bet for any image
Give your text its own solid panel on top of the photo. Inside the box you control everything, so contrast is never in question. It works on absolutely any image, no matter how busy. When in doubt, this is the most reliable choice.
The trade-off. The box covers part of your photo and feels more structured, less immersive than text floating on the image. Often a fair price for guaranteed readability.
The shortcut
| If your background is… | Reach for |
|---|---|
| Calm and even | Text colour only. Simplest and cleanest. Let the photo breathe. |
| Busy, but the photo matters | A contrasting overlay, ideally a gradient. Evens things out while keeping the image present. |
| Slightly tricky, image must shine | A subtle outline or shadow on the text. Keep it light. |
| Chaotic, readability above all | A content box. The reliable choice that works on anything. |
The part most people skip
Readable text is not a nice-to-have. For a lot of people it is the difference between using your site and bouncing off it. Visitors with low vision, colour blindness, or simply an older phone in bright sunlight all rely on strong contrast to read at all.
There is an actual standard for this. The Web Content Accessibility Guidelines, or WCAG, set a minimum contrast ratio between text and its background. Normal body text should hit at least 4.5 to 1. Large text can go down to 3 to 1. These are the AA targets, the benchmark most organisations aim for.
What the failing example scores
1.38:1
White text on the foggy sky
4.5:1
The minimum WCAG asks for
A clear fail at every level, the kind a checker flags as very poor. The text being technically on the page means nothing if a chunk of your audience cannot make it out.
Text over a photo is harder to measure than a flat colour, because the background changes across the image. That is the real argument for overlays and boxes: they give you a known, even background you can actually test against.
You do not need to eyeball this. Free tools like the WebAIM Contrast Checker let you paste in two colours and get the ratio instantly. Check the worst-case patch of background your text sits over, not the easy bit.
The short version
Pick the image first. A photo with calm, even space does most of the work for you.
If colour alone is not enough, reach for an overlay, then an outline or shadow, then a content box, in roughly that order of how busy your background is.
Then check it against WCAG. Readable text is the baseline, not the polish. Everything here is theory you can apply today, before anyone touches the visual design.
We build websites where the message lands and the design holds up for every visitor. If your homepage is not pulling its weight, let us take a look.