A headline sits over a photo and looks perfect—in the one crop the designer chose, on the screen they designed it on. Then the layout narrows, the photo shifts under the words, or an editor swaps in a new image, and the text slides onto a bright patch where it nearly disappears.
This guide helps you decide what to do when words meet a photograph: move the text, add a background treatment, separate it from the image, or set it as a caption below. It is about the text-and-photo relationship, not image cropping, which the phone-preview guide covers, and not words baked into a graphic, which the alt-text guide covers.
In Online Website Previewer you can compare the text against the real photo across phone, tablet, and desktop, and switch the phone preview between portrait and landscape to see how the crop shifts.
Decide What the Words Do
First, name what the text is for. A headline or an action label is the page’s offer and has to work where it sits. A caption describes the photo, and a credit names its source—different jobs that need different treatment.
Keeping that straight matters, because a caption can explain a picture but cannot stand in for the offer, and neither one replaces the image’s alt text. Ask whether the words sit over the photo because that serves their role, or just because a template puts them there.
Look at the Area Right Behind the Words
Readability is decided by the busiest spot behind each line, not the image’s average or a convenient blank corner. Read the actual crop under the full line of text, including the brightest patches and the fussy detail.
Then check it against the images and widths the template will really use. Longer wording and a replacement photo can push text onto a detailed area that the first image happened to keep clear, so do not assume one checked image stands for every future upload. For backgrounds that vary behind the letters, WCAG technique G18 describes one way to keep the text legible.
Compare the Least Disruptive Fix
Reach for the smallest change that makes the text readable while keeping the photo useful. Nielsen Norman Group’s guidance on text over images walks through these treatments and why you have to check more than one image. The main options each have a tradeoff:
- Move the words to a consistently quiet area. This works only if real crops and replacement images keep that area quiet.
- Add a scrim—a translucent layer—or a gradient behind the text. Judge the resulting pairing, not an arbitrary opacity, since it darkens the picture and can hide detail.
- Put the text on a backing panel. A solid panel gives a stable background, while a translucent one still depends on what is underneath.
- Separate the message from the photo, giving the words their own surface beside or above it. This changes the composition and can add height.
When a Caption Below Makes More Sense
Sometimes the honest answer is to stop fighting the photo. When the words explain the picture, a caption on its own line below the image stays readable and avoids a variable background entirely. HTML links a caption to its image through the figure and figcaption elements, which a developer can use to keep the two associated.
On one New York Times travel article about visiting Honolulu, the explanatory caption sits on a plain line below the photo rather than over it, so the words never have to compete with the scene. That is one article at one width, not proof that every outlet or page works this way. A caption below is a sound option when the text describes the image—just keep the link between them obvious, keep the caption readable, and remember a caption is not a credit and not alt text. It is a choice to compare, not a rule that captions must always go below.
Measure the Final Combination
A visible shadow, a bold weight, or a scrim percentage proves nothing on its own. Ask an accessibility reviewer to check the rendered text against its immediate background, across the relevant crops and states, including whatever the overlay actually does.
For reference, WCAG 2.2 asks for 4.5:1 for normal text and 3:1 for large-scale text—at least 18 pt, or 14 pt bold, or the CJK equivalent, not simply anything that “looks like a headline.” There is an Incidental exception for text that is genuinely part of a picture, like a shop sign within the photo, but it does not excuse a headline or button label you placed over the image, so do not lean on it for your own overlaid text.
Point to the Exact Spot
Point to the exact combination, not a vague impression. Give the page and width, the words, and where behind them the contrast breaks down.
For example: at phone width, the white hero headline crosses the bright sky in the new photo and is hard to read, so please compare moving it to the darker lower third or adding a scrim, then check the resulting contrast against the real crops. The headline is the offer, so keep it readable rather than demoting it to a caption—save the caption-below option for the line that describes the photo. Keep the same words and photo when you compare, since a fix that helps the text can still hide the part of the picture that mattered.
