The examples in this article use a Chrome extension that is no longer supported. You can use this contrast analyzer from TPGi as an alternative.

Images can enhance interfaces, but, when serving as background for text, they can reduce its legibility. Small adjustments to the images can keep designs accessible and attractive.

In This Article:

Image Contrast Is Essential

A well-chosen visual adds interest and sets the tone of a website, in addition to (hopefully) conveying some meaning. Eyetracking research shows that people are attracted to information-carrying photos related to the user’s current task (and are likely to ignore decorative images).

Images can also prompt a positive visceral emotional response and spur viewers into taking action. As a result, many designers create highly visual interfaces that downplay text and contain large background images or videos.

However, placing text on top of an image  backfires when the contrast between the text and the background is too low. According to accessibility requirements for color contrast, text that is not purely decorative or part of a logo should have a contrast ratio of at least 4.5:1 (or 3:1 for large characters, defined as an 18-point font or a 14-point bold font).

Subtle Tweaks Make a Big Difference

Placing text over an image can’t be avoided, but special care must be taken to ensure that the text is both legible and readable to users. (As a reminder, legibility refers to the ability to distinguish the individual characters, while readability refers to the ability to actually process the meaning of the words.) 

When text is difficult to decipher, readers are forced to choose between straining their eyes and skipping over the content. Rather than risk that users ignore your text, implement small changes to the design to increase the contrast between the text and the background.

Subtle Tweaks Make a Big Difference in Usability

Placing text over an image need not be completely avoided, but special care must be taken to ensure that the text is both legible and readable to users. (As a reminder, legibility refers to the ability to distinguish the individual characters, while readability refers to the ability to actually process the meaning of the words.) When text is difficult to decipher, readers are forced to choose between straining their eyes and skipping over the content. Rather than risk that users ignore your text, implement small changes to the design to increase the contrast between the text and the background.

Banner image with the text "How Would You Design Your Perfect Job." When given a contrast overlay, the text fades, indicating the contrast is poor.
🚫 Spire.com: (Left) The faded and visually busy background image made the white text difficult to read. (Right) A tool for contrast-ratio analysis confirmed that the text did not have adequate contrast with the background (indicated by the dark, nonoutlined areas).
Banner image with the text "How Would You Design Your Perfect Job." When given a contrast overlay, the text remains, indicating the contrast is good.
✅ Spire.com: (Left) Darkening the background with a radial gradient overlay allowed the white text to have stronger contrast, without drastically changing the visual tone of the image. (Right) The edited darkened version did pass the contrast-ratio accessibility guideline.

Consider Color

When placing text over an image, consider both the text color and the main color of the image. Light-colored or faded backgrounds are not well-suited to white text because the colors are too similar. In these situations, the background will need to be darkened to provide enough contrast.

This can be done either by processing the image or by adding a semi-transparent black gradient over the image in the CSS. A tool such as the Color Contrast Analyzer by TPGi can help determine when the background has been sufficiently darkened to provide adequate contrast for the overlaying text.

Product page with product images overlayed with text. When contrast is applied, the text fades into the images.
🚫 (Left) The furniture site Compliments displayed product-category links as white text over photos; the text was difficult to read due to the low contrast and likely to be ignored in favor of the easier-to-read grid items. (Right) The majority of the text areas with a photo background do not meet contrast-ratio guidelines.
Product page with the product images overlaid with a fade effect and text. When a contrast filter is applied the text remains legible.
✅ (Left) A blur was added to the text background and the font color was changed to the default dark colors. Additionally, the text was moved down for consistent placement with other grid items, allowing the blur to be contained to a smaller portion of the image. (Right) The text now possesses the needed contrast ratio for accessibility.

Adding a blur effect to photos offers an alternative to darkening every image. While it will alter some aesthetics and branding, blurring a portion of a photo minimizes legibility issues by making the text background appear more consistent. You can also avoid affecting the image too much by positioning text near the edge of the image. The lower portion of photos tends to lend itself well to added effects such as a blur, a darkening-gradient overlay (AKA “floor fade”), or a semitransparent colored background for that area of text.

A homepage with many hero images overlayed a semiopaque box with text. When a contrast filter is applied, the text fades.
🚫 Left: The REI website placed a semiopaque black box behind text that overlays an image, but the contrast was still too low to support readability for the white text over light-background photos. Right: The main headline appearing over clouds failed to pass even the 3:1 contrast-ratio threshold for big text.
A homepage with many hero images overlayed a semiopaque box with text. When a contrast filter is applied, the text remains.
✅ (Left): In our redesign, we darkened the background color of the box by slightly increasing the opacity to 50% instead of 30%. This change,, maintained the overall branding and provided the higher contrast needed for the white text over the background of clouds. (Right): The text within the box now passes the 3:1 contrast ratio test.

Consider all possible images that may be used before deciding on a technique for handling text-overlay contrast. Often, a solution may work for one image but not for others. If both dark and light images are included in a design, ensure that the chosen method will provide a high enough contrast for the worst-case background image and text placement.

Conclusion

There is no need to choose between creating a usable design and an aesthetically pleasing design — both can be achieved simultaneously if attention is put toward both goals. When combining emotion-provoking imagery with informational text, ensure that the text is readable by creating a high-contrast ratio between the text and its background. Use effects such as a semiopaque overlay (either covering the entire image or just the text portion), a blur, a text shadow or outline, or a combination of these techniques. Remember that it’s not enough to make it possible for people to use the site, which is the definition of accessibility. The site must also be easy and pleasant — qualities which require good usability and little eyestrain.