Why Text Over Images Fails — And How to Fix It

Placing text on top of images is a common way to make content visually engaging. The pattern works well when the text communicates the image's purpose or anchors primary navigation. But it breaks down quickly when contrast between the text and the underlying image falls below readable levels. Poor positioning and distracting image elements compound the problem.

"Because images play such an important role, often designers end up placing text over an image to leverage the attention-grabbing aspect of the photo while providing text-based content to communicate actual information. However, these endeavors commonly backfire, usually when the contrast between the text and the background is too low."

— Aurora Harley, "Ensure High Contrast for Text Over Images" (NN/g Nielsen Group)

The accessibility bar is defined by WCAG Success Criterion 1.4.3. Text over images should meet the minimum contrast ratio of:

  • 3:1 for large text (above 18 pt normal, or 14 pt bold);
  • 4.5:1 for body text (below those thresholds).

The same minimums apply to images of text. A few practical references for implementing these techniques in HTML and CSS are useful starting points:

Overlay the Entire Image

Overlays are colored layers applied across the whole image surface. Common variants include light overlays, dark overlays, dark gradients, or colored washes. Their primary function is to reduce the visual prominence of the image and create a consistent backdrop for text, which directly improves readability and contrast.

Try This and Avoid This for Accessible Text Over Images design techniques, with the left side showing an example of what to try such as using a dark overlay over a photo and white text on top, and the right side showing an example of what to avoid (white text directly over a photo). The text displayed over the image reads ‘sky, sea, & you.’
Overlays are used to make images stand out less or to act as a background for the text. In the example on the left, the contrast is much better, while in the example on the right, the text is barely readable. (Image credit: Photo by dharmendra sahu on Unsplash) (Large preview)

Live Examples

Strong.app landing webpage with a headline saying ‘Think less. Lift more.’ and with the subheading ‘Strong is the simplest, most intuitive workout tracking experience. Trusted over by 3 million users worldwide.’ At the bottom are the Download on the App Store logo and Get it on Google Play logo
Strong.app uses a linear colored overlay gradient to increase the contrast ratio between the image and the headlines. (Large preview)
Hero image of Huston Engineering with text saying ‘MEP ENGINEERING FIRM. YOUR SYSTEMS. OUR REPUTATION.’ over a red background overlay
Hero image of the Huston Engineering that uses a full colored overlay to better highlight the text. (Large preview)
A screenshot of the Della Vite website. White letters ‘PROSECCO RE-IMAGINED’ in the center, on a dark background
The Della Vite website uses a very dark overlay over a photo, with white colored text with plenty of contrast. (Large preview)

Tools and Reading

  • Optimal Overlay Finder — calculates the ideal overlay opacity against an image so contrast meets WCAG 2.1.
  • Color Accessibility Workflows by Geri Coady — a book covering why color accessibility matters and how to work with it.

Scrim Overlays for Flexible Backgrounds

Scrims are semi-transparent gradient layers that sit between the text and the image. They are lighter and less obtrusive than full overlays, but just as effective at lifting text readability across uneven image content.

Scrims can be applied in a variety of ways, including the following:
  • Darkening or lightening the surface and its content.
  • Reducing the opacity of the surface and its content.
Multiple surfaces on a screen at a time can display scrims. Scrims can appear at any elevation, whether in the foreground or background.

— Google Material Design

Black and white are conventional scrim colors, but other hues work just as well, provided you maintain the required contrast for the text on top.

Try This and Avoid This for Accessible Text Over Images design techniques. The left side contains an example of what to try to make accessible text over images, such as using a scrim design technique that uses a semi-transparent or semi-opaque gradient. The right side shows an example of what to avoid. The text displayed over the image reads ‘sky, mountains, & you’ and is positioned in both examples at the top left corner
The left side shows a scrim design technique with a semi-transparent gradient. The text in this example has much better contrast than the one on the right. (Image credit: Photo by Ales Krivec on Unsplash) (Large preview)

Live Examples

On-running landing hero page. The hero image is a man and a woman running together using on-running shoes. The text is saying ‘The new Cloudswift 3’, and there’s a sub-heading that says ‘Crush your personal best on the pavement’ along with a call-to-action button ‘Shop now’ in black text on a white background
On-running’s homepage with a hero image that uses a scrim overlay effect to highlight the text over the image. (Large preview)
Screenshot of the Solanco School District website that uses the scrim overlay effect on their hero image to improve the readability and legibility of the headline that says ‘Connecting. Inspiring. Empowering.’
Clever way of using scrim overlay as you can see on the Solanco School District website: it uses a subtle overlay from left to right. (Large preview)
Soto Gardens website’s header image uses a scrim overlay technique to make the navigation more readable
Another example of scrim overlay is Soto Gardens website. (Large preview)

Handy Resource

Strips and Highlights

One of the fastest contrast fixes is to place text on a semi-transparent dark rectangle strip instead of directly on the image. The strip can match the text width or run the full length of the image, and it doesn't have to be black. More colorful treatments are fine, but the contrast requirement between text and the strip remains non-negotiable.

Try This and Avoid This for Accessible Text Over Images design techniques, with the left side containing an example of what to try such as using a strips/highlight: simply add a solid or semi-transparent rectangle strip over the image along with the text, and the right side showing an example of what to avoid. The text reads ‘Arts & History’ in the first strip and ‘Art Through The Glass’ in the second strip
On the left is the strips/highlight technique: just add a solid-color or semi-transparent rectangle strip over an image along with the text on top of it, and there will always be plenty of contrast. (Image credit: Photo by Imani Bahati on Unsplash) (Large preview)

Live Examples

Mode’s website uses the strip technique to cleverly embed their main headline along with the originally shaped strip. The screenshot shows a dark green background, with the dark text ‘Business Intelligence built around data teams’ on top of a light green strip, with plenty of contrast between the strip background color and the text color
The Mode website uses the strip technique very cleverly along with their main headline. (Large preview)
A screenshot of Cantos website that uses a strip overlay technique over the images and video reels
The Cantos website uses a gradient strip technique over the image and the video reels, to better highlight the text of the description of the hero image and of the video reels. (Large preview)
A screenshot of Estea website that uses the strip design technique over images to improve their product descriptions
Another example of clever use of the strip technique that not only works for headings and tiles but also for long descriptions and paragraphs as you can see here on the Estea website. (Large preview)

Further Reading

Design Within the Copy Space

When an image naturally contains a calm, uncluttered section, that's your best spot for text. Copy space is an image area with less visual noise and enough inherent contrast to host legible text without extra treatment.

Try This for Accessible Text Over Images design technique examples of what to try such as positioning of the text over the empty space of the image. The text reads ‘Currently Reading’ and ‘The Future.’
Copy space design technique where the text is positioned in an empty space of the image. (Image credit: Photo by Milad Fakurian on Unsplash) (Large preview)

But even in copy space, you still need to measure the contrast — a calm area isn't guaranteed to pass the ratio minimum. Positioning text there only works when the text remains readable against what sits underneath it.

Live Examples

A screenshot of the Rockwell Group website header image that uses the Copy Space design technique to place the text
The Rockwell Group website uses the Copy space design technique where texts are carefully laid out over the empty and passable contrast ratio over text. (Large preview)
A screenshot of Green IT solution website hero image that uses the Copy Space design technique over the image. Their headline is positioned front and center, surrounding other supporting illustration elements such as keyboards, laptop fan, and various other IT devices
The Green IT Solution website position their headline text in front and center so that it is clear and easy to read. (Large preview)
Villa Boisserée website uses the top empty space of the hero image to position their headline that reads ‘Rent a villa on the banks of the Rhine in Cologne.’
The text headline placement of Villa Boisserée placed over the image that makes the website aesthetically elegant. (And there’s also the little detail where the photo of the house slightly overlaps the letters in the title.) (Large preview)

Blur as a Focus Tool

Applying a blur effect to a background image is a practical way to handle busy or high-detail visuals. The technique reduces the visual noise behind your content, allowing layered text to stand out without a stark separation between foreground and background.

While the effect adds dimension and depth, it also helps maintain contrast, making it easier for users with low vision to read the overlaid content without losing the aesthetic appeal of the underlying image.

Used For Hero Headers

The blurred-background approach is a common choice for hero headers, typically paired with a strong, bold typeface. By softening the entire image, you create a neutral canvas that supports large, impactful typography, ensuring legibility remains high across different screen sizes and resolutions.

In Practice

  • HLK Agency — Uses a fully blurred image behind its hero section, letting the headline take center stage without competing image detail.
  • Tion Renewables — Employs selective blurring to shift focus away from background textures and toward the value proposition in its headline.

More Reading

Series Progress

This set of techniques — overlays, scrims, text strips and highlights, copy space, and image blurring — address most scenarios where text and imagery meet on a landing page. The next installment will examine five additional treatments: framing the image, soft-colored gradients, text styling and positioning, solid color shapes, and using fully colored backgrounds. That part will also include a round-up of supporting tools and resources for practical application.