(855)-537-2266 sales@kerbco.com

What is the text over images design pattern? How do we apply this pattern to our designs without sacrificing legibility and readability?

The text over images design pattern is a design technique used to place text on top of images. It is often used to provide information about the image or to serve as the main website navigation. However, this technique can quickly sacrifice legibility and readability if there is not enough contrast between the text and the image. To prevent this, designers need to ensure that the text and the image have a high enough contrast ratio to be legible and readable. Additionally, designers should also make sure the text is positioned in the right place, away from any image elements that might cause confusion, distraction, or make it difficult to read.

“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)

Before going forward, here are some useful resources (on how you can apply these techniques in practice with HTML/CSS) that are worth checking out:

  • “7 Rules For Creating Gorgeous UI – Part 2,” by Erik Kennedy
  • “Handling Text Over Images by CSS,” by Ahmad Shadeed
  • “Design Considerations: Text On Images,” by Chris Coyier

How To Design A Text Over An Image

Admittedly, when I was starting my design career, and I had very little accessibility knowledge, one of the main things I used in my designs was the text over images design pattern, without me knowing that I was hurting my users who have low vision.

“A picture says a thousand words. But sometimes, images alone won’t work. This is why typography still proves to be a vital aspect of design despite the focus on more visual content. Remember that the need for visual content does not tell you to stop adding text to your designs — it simply reminds you to do so in the most tasteful and stylish way possible. And, of course, readability should not be sacrificed in the name of design. You can’t add text that people can barely understand, then argue that it’s a piece of art. Sending a message that cannot be deciphered defies the purpose of what you’re doing.”

— Igor Ovsyannykov, “”

Yet accessibility is a key aspect of design, and working with typography is one of the cornerstones of UX design. There are many typography principles that will help you create user-friendly designs. In the following sections of the article, you will learn more about how you can improve your design without sacrificing the accessibility aspect and how to combine text and images better.

According to WCAG Success Criterion 1.4.3, make sure that your text on images should meet the minimum contrast of

  • 3:1 for large text (text bigger than 18 pt normal, or text bigger than 14 pt bold);
  • 4.5:1 for body text (text lower than 18 pt normal, or text lower than 14 pt bold).

Ensure that a minimum visual contrast ratio of 4.5:1 is maintained between the text and its background. This minimum contrast ratio should also be maintained in the case of images of text.

— “Understanding Success Criterion 1.4.3: Contrast (Minimum),” W3.org

Using An Overlay Technique Over The Entire Image

Overlays are colored layers such as overlay light, overlay dark, dark gradients, or colored overlays. As a general rule, overlays are used to make images stand out less or to act as a background for the text so that it has better readability and contrast.

Examples From The Wild

Additional Resources On This Topic

Text With Scrim Overlay

The scrim design technique uses a semi-transparent, lightweight, and semi-opaque gradient layer that helps text appear more readable against various backgrounds.

According to Google Material Design, “Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent.” They help direct user attention to other parts of the screen, away from the surface receiving a scrim.

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

Furthermore, you can explore this technique by using different colors besides black or white colored layers.

Examples From The Wild

Additional Resources On This Topic

Strips/Highlight Technique

The strips/highlight is one of the simplest design techniques that you can apply to your design. Add a semi-transparent black (or dark-colored) rectangle strip over the image along with your text, or you can be bolder and use different colors instead. But always make sure that the colors you selected for the fonts and the graphic elements have a lot of contrast against the background!

Examples From The Wild

Additional Resources On This Topic

Find And Use That Space (Copy Space)

Yes, use that space to position your text, but first, make sure the space is passing the minimum contrast ratio. Space provides the perfect location for your text, especially when you balance and harmonize all the elements between the image and text.

Copy space is an area of an image that is less busy and usually has enough contrast to give you space to write or put your text on.

Examples From The Wild

Additional Resources On This Topic

Text Over Blurred Background Effect Of The Entire Image

Blurring an image with a variety of blurred background styles, such as blurring the entire image, or adding a blur effect to highlight only the main subject, can bring focus into your text layered on top of the image, tone down the “busy” feeling of the image, and also add more dimension and depth to the visuals.

The blurred background design technique is widely used for hero headers when combined with a bold, impactful typeface.

Examples From The Wild

Additional Resources On This Topic

Conclusion

Thank you for joining me on this accessibility journey. So far, we covered five key techniques when designing text over images: using an overlay over the entire image, text with scrim overlay, strips/highlight, copy space, and text over blurred background effect. In the following article of the series, we will review five more — frame the image, soft-colored gradients, text styles and text position, solid color shapes, and use of colored backgrounds — and I will also share with you a few additional useful tools and resources. Stay tuned!

Further Reading On SmashingMag

This content was originally published here.