A well-chosen visual adds interest and can set the tone of a website, in addition to (hopefully) conveying some meaning. Eyetracking research has shown that people are attracted to information-carrying photos, when the images are related to the user’s current task. (If instead the images appear to be purely decorative, they will likely be completely ignored.) Images can quickly prompt an emotional response in viewers and can spur them into taking some type of action. This ability of an image to elicit a positive visceral response has caused many designers to create interfaces that are highly visual, downplay text, and often contain large background images or videos. (Large pictures are frequently encountered in conjunction with minimalism, although they do not quite define this design trend.)

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. 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 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.

 Don’t:

Left: The background image used for the third slide in the homepage carousel for Spire.com is both faded and visually busy, making the white text difficult to read. Right: A tool for contrast-ratio analysis confirms that the white text does not have adequate contrast with the background (the dark, nonoutlined areas are those that do not possess the sufficient contrast ratio of 4.5:1 for small-sized text).

 Do:

Left: Darkening the background with a radial gradient overlay allows the white text to have stronger contrast, without drastically changing the visual tone of the image. Right: The edited darkened version does pass the 4.5:1 contrast ratio guideline for accessibility.

When choosing to place text over an image, consider both the text color and the main color of the image. Images with mostly light-colored backgrounds—or images edited to appear faded—are not well suited to white text because the colors are too similar. In these situations, the background will need to be darkened in order to provide enough contrast. This can be done either by processing the image itself, or by adding a semi-transparent black gradient over the image in the CSS. A tool such as the Color Contrast Analyzer Chrome browser extension from NCSU can help determine when the background has been sufficiently darkened to provide adequate contrast for the overlaying text.

 Don’t:

Left: The furniture site Compliments displays product-category links as white text over photos. These category links are difficult to read due to the low contrast, and are 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 the contrast-ratio guideline of 3:1 for large-sized text.

 Do:

Left: In this edited version, a blur has been added to bottom of photos containing text, and the font color has been changed to the default dark colors instead of white. Additionally, the text has been moved down to have 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 3:1 contrast ratio for accessibility. Even better, the text also passes the 4.5:1 ratio for small-sized text, ensuring good readability for users.

Adding a blur effect to photos certainly affects the aesthetics and the branding of a site, but is a good alternative to darkening every image. Additionally, blurring the portion of a photo over which the text will be displayed minimizes likely legibility issues, since the large variation of colors and of brightness levels diminishes the ability to distinguish the clear outlines of the characters. Positioning the text area in a consistent location near the edge of images allows the contrast-adding blur effect to be confined to that particular area, and thereby affect the image to a smaller degree. The lower portion of photos in particular 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.

 Don’t:

Left: The REI website places a semiopaque black box behind text that overlays an image, but the contrast is still too low to support readability for the white text over light-background photos. Right: The main headline appearing over clouds fails to pass even the 3:1 contrast-ratio threshold for big text.

 Do:

Left: In our redesign, slightly increasing the opacity to 50% instead of 30% for all the black text boxes maintains the overall branding, and provides 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 the full range of possible images that may be used before deciding on a technique for handling the contrast of overlaying text. Often a solution may work for one type of image—for example, those that are mostly dark or which have a shallow depth of field—but not work well for others. If both dark and light images may be included in a design, ensure that the chosen method will provide a high-enough contrast for the worst-case background image and text placement. Just because you did something to help increase the contrast doesn’t necessarily mean that you’ve added enough contrast to make the text truly readable.

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.