Designing Accessible Text Over Images: Best Practices, Techniques And Resources (Part 2) : Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

reviews various accessible text over images techniques for designing your content, including framing the image, soft-colored gradients technique, text styles and text position, solid color shapes, and use of colored backgrounds.

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.

“Incorporating text with imagery is a balancing act. To create professional, compelling content, the image and text must reach a visual harmony. At the same time, strong contrast between text and image will increase legibility and will make your content stand out.”

— “Tips for Overlaying Text on Imagery,” Getty Images

In Part 1 of the series, we have reviewed in detail five techniques (using an overlay over the entire image, text with scrim overlay, strips/highlight, copy space, and text over blurred background effect) and now we’ll continue with reviewing in detail five more (frame the image, soft-colored gradients, text styles and text position, solid color shapes, use of colored backgrounds). In the end, I will also provide you with a long list of useful tools and resources related to this accessibility topic.

Frame That Image #

Another simple design technique you can try is by framing the image in a flat-colored shape that includes your text. This kind of style is mostly used in thumbnails and cards.

Two ‘try this’ examples next to each other, each one displaying a card component: an illustration in the top section of the card, text in the bottom section, and the illustration and the text are encompassed by a frame with rounded corners — Frame that image — try this option! Your text over (or rather, next to) the images will be perfectly accessible by using a frame or some solid colors contained within the image. This technique is used very often when creating card components. (Image credit: Photo by Google DeepMind on Unsplash) (Large preview)

Examples From The Wild #

July Fund

A parallax website that uses card components with images and a frame that image design techniques to position the texts — The July Fund website uses the frame that image technique, with different passing backgrounds and text colors. (Large preview)

ABL Space Systems

A three-card component is laid out with images and text. The image is individually framed on a white background so that the text over it will be more readable. A snow-covered mountain photo serves as a background for the three-card component — Your image stands out more if you position it in a way that does not require any special editing or additional manipulation. Such is the amazing example from the ABL Space Systems website, which uses a grid layout and the frame that image design technique. (Large preview)

Additional Resources On This Topic #

Bento Grids
Bento Grids is a nice curated collection of tiles-based layouts (that were initially popularized by Apple). The main idea behind this is to present the key takeaways in a visual and easy-to-consume way. Bento layouts are great for showcasing brand identity, summarizing product features, and much more.
Godly → Websites → Grid style
A large collection of some of the best grid-style websites.

Soft-colored Gradients Technique Over Images #

When black or white gradients don’t work well, you can use the soft-colored gradients text over image technique. These soft-colored gradients are created when two or more different colors are blended to create a soft and gentle transition from one color to another. They are commonly used on websites and page designs to make them look modern and creative.

Try This and Avoid This examples for accessible text over images design technique, with the left side containing an example of what to try, such as soft-colored gradient colors below the text, and the right side showing an example of what to avoid. The text reads, ‘City life.’ (headline) and ‘Top 10 most busiest city.’ (description). — On the left is an example that uses the soft-colored gradient design technique. You can notice that the text is easily readable and has perfect contrast in relation to the background photo. (Image credit: Photo by Simone Hutsch on Unsplash) (Large preview)

Examples From The Wild #

Porto 128

Hero image of the Porto 128 template that uses a soft-colored gradient from the bottom side to make the text readable and accessible. The text is positioned in the middle and reads ‘Welcome to Grand Residence Boutique Hotel’ — The subtle placement of a soft-colored gradient from the bottom side makes the Porto 128 website design template headline stand out and be more readable. (Large preview)

Perfect Day

The Perfect Day hero image with a soft-colored gradient overlay effect positioned from left to right. The gradient overlay effect colors go from orange to yellow and green and blend with the hero image (a girl smelling a yellow flower). The headline says, ‘In a more compassionate world, everything is better.’ The sub-heading says, ‘We have an opportunity to make the brightest future a reality. For all of us.’ — Perfect day’s header image uses a soft-colored gradient overlay that perfectly blends with the image and makes the text accessible and easy to read. (Large preview)

Additional resources on this topic #

Gradient Maker (by Angry Tools)
CSS Gradients Generator (by Designstripe)

Play Around With Text Styles And Text Position #

Achieving the 1.4.3 success criterion might be difficult even if we have used some of the techniques outlined in the examples above, or when any combination of those techniques still fails. In such cases, one of the safest options is to play around with text styles and with the text position outside of the image.

Various text styles (bigger or smaller text; emphasize, low-key, bold, regular, or light text style; playing with margins and letter spacing, etc.) and combining these text styles in different ways may help you achieve a powerful impact with regards to your design while not sacrificing any accessibility. You can also position your text to the left or right, the top or bottom, and you’ll have an accessible and visually appealing website or app.

This technique is great if you combine your text styling techniques and play around with the images. With text positioned outside of the image, you have control over how to make it more accessible by using real text that can be zoomed in to maximum for those people who may have trouble reading small text on the screen or for those who wish to use their voice assistants.

Try This for Accessible Text Over Images design techniques with both the left side and right side containing an example of what to try using different text styles and text positions. On the left side, Try this example text is positioned at the bottom of the framed image, and on the right side, Try This example text is positioned at the top of the framed image — Different examples of what to try when using different techniques related to the positioning of text, such as text positioned on empty spaces with solid backgrounds. (Image credit: Photo by Tyler Casey on Unsplash) (Large preview)

Examples From The Wild #

Bolimówek

A screenshot of the Bolimówek website that uses a text over image design technique, such as using Copy space to position the text outside of the background image and playing around with text-aligned styles — A very good example of this technique can be seen on the Bolimówek website. It uses empty space, and the text is positioned outside of the header photo and left-aligned. (Large preview)

My Toronto Condo

My Toronto Condo website screenshot shows that accessibility and aesthetics can go together. In the example, on the left is a photo (tall buildings at the rear; green trees at the front), and on the right side is the text and call-to-action that are well placed, with enough contrast between the font and the white background. The title reads ‘Exceeding Your Expectations,’ and the sub-heading reads ‘Christopher’s unrivaled market knowledge and experience in the Toronto real estate market continually achieve record sales prices.’ — Another example of playing with text styles and text position is from the My Toronto Condo website, where the half image/half solid background technique is used. The text is on the right and balances perfectly with the header image on the left. (Large preview)

Scribely

Scribely website screenshot of their hero image that uses the well-placed image and text on the left side. The text reads, ‘Accessible digital content created by humans for humans.’ — The Scribely website demonstrates that accessibility and aesthetics can go hand-in-hand, and not only that, but they are also correctly adding detailed Alt text descriptions to their images. Here the photo is on the right, and the text is on the left, creating a good balance. (Large preview)

Additional Resources On This Topic #

“Design Considerations: Text on Images,” by Chris Coyier (CSS Tricks)

Play With Solid Shapes #

Using only simple shapes can make a lot of difference. Play around with solid shapes by creating strong harmony between the color of your text and the background colored shape. Once you learn how to balance the text styles and the colors, the readability of the text will greatly improve.

‘Try this’ examples for accessible text over Images design techniques, with both the left and right sides containing an example of what to try by using playful, different shapes. On the left side of Try This example, the text is positioned at the bottom over a slightly distorted rectangle; the text over the colored shape reads ‘Art Through The Glass’. On the right side of Try This example, the text is positioned at the center over a dark-red ellipse shape; the text over the dark shape reads ‘Currently reading The Future.’ — The use of simple shapes in order to make your text easier to read is another design technique you can practice. (Image credit: Photo by Imani Bahati on Unsplash and illustration by Milad Fakurian on Unsplash) (Large preview)

Examples From The Wild #

The Female Gaze

A screenshot of the hero image of The Female Gaze website that uses a playful shape design technique to display their headline text — The Female Gaze website uses a playful shape in the form of a torn paper effect which looks perfectly placed together with the website’s headline. This example clearly shows that you can play around with different colors and shapes as much as you want, and in the end, you will still achieve perfect text contrast and readability. (Large preview)

Pantoute

A screenshot of the Pantoute website that displays the use of playful solid color shapes to emphasize the text on top of them — When combined with a colored background and shapes, you will get a type of website header that stands out, such as in this example from the Pantoute website. (Large preview)

Additional Resources On This Topic #

“The psychology behind shapes and colors,” by Rob Postema (UX Collective)
“Apply color theory to your designs,” by Pranav Ambwani (UX Collective)
“Your ultimate guide to background design” (Canva Design)

Ditch The Image And Just Use Colored Backgrounds #

In case you cannot fulfill the 1.4.3 success criterion, you have the option of replacing images with colored (uniform color) or gradient (two or more colors) backgrounds. This technique facilitates screen readers to read actual text instead of images, hence enhancing accessibility for visually impaired users. Furthermore, using this technique, you can adapt the text to meet your user’s preferences, optimize it for various screen sizes, and even adjust the size or zoom level without compromising its quality.

Furthermore, with this technique, you can easily customize real text according to the user’s requirements, such as colors or styles, and much more. It might be difficult to achieve this criterion in certain circumstances, but giving users an option to customize those things instead of using images would be better for everyone involved, and that is why this technique does not require much effort on your part at all.

Try This for Accessible Text Over Images design techniques with both the left side and right side containing an example of what to try using colored gradient backgrounds. The text overlaid on a colorful gradient background reads, ‘Health topic today Digital Biology’ — An example of Try This and Avoid This with text overlaid over a colorful gradient background. (Large preview)

Examples From The Wild #

Bou

A screenshot of a webpage with text overlaid on a colorful gradient background. The text in black reads, “Call it like it is. We are marketers, designers, writers, and developers. Shaped by tech — An example of using text overlaid over the colored gradient background from Bou website. (Large preview)

Studio 5B

A screenshot of Studio 5B’s homepage that has text overlaid over a dark background. The heading text (in white letters) reads ‘We design people-centric healthcare experiences’ placed over a dark gradient background — Another example of text overlaid over a colored gradient background is from Studio 5B’s website. (Large preview)

Koryun

Screenshot of the Koryun design agency website, with perfect contrast between the dark-colored text and the lighter-colored red background. The heading reads, ‘Elevating user experience to new heights,’ and the sub-heading reads, ‘We're a UX/UI agency that designs beautiful user interfaces & experiences.’ — In the example of the Koryun UX design agency website, you can see a perfect contrast between the dark-colored text and the lighter-colored red background. No special images are used in the example. (Large preview)

Additional Resources On This Topic #

CSS Gradients Generator (by Designstripe)
“How to add a gradient overlay to text with CSS,” a tutorial by Sarah Fossheim

Just Use The Actual Text! #

Lastly, while all of these design techniques will help you make the text over images more accessible, I still think that using the actual text is the way to go.

Providing special care to ensure that text over an image remains perfectly readable and accessible is a must, and, as you have seen in sections 1 — 10 of the article, there are plenty of design techniques for that purpose. But again, if you want to make your website or mobile app accessible right from the start, why not simplify things a bit and do it properly? Use real text, make sure there is plenty of contrast between the text and the background, and make your website or app accessible to everyone.

Using text over images provides a combination of benefits, and yet it has some limitations. Text placed over images is harder to read for visually impaired users, especially at smaller text sizes, because the content gets more compressed. There are also some accessibility requirements for different colors under the WCAG 2.1 guidelines. If you have trouble implementing the success criterion mentioned in the design techniques we’ve presented, ditching everything and just using real text will do the trick.

Conclusion #

As with any new design trends popping out in different places, we need to make sure that what we’re creating is not only pretty but is also helping our users. Always consider the accessibility aspect to be “baked in” right from the start rather than being an afterthought in your design process.

In any case, if someone asks you why the real text is better to use rather than text over images or images of text, here are a few key things to remember:

Real text can be zoomed in to any size without distortion and pixelation, and (what’s also very important) it can be read by assistive tech software.
Additionally, you can easily increase the contrast of the text, which will help your users access the content easier.
With actual text, you have the freedom to create your own styling and make use of CSS to format the text elements. I can highly recommend you to read the very detailed hands-on tutorial on how to use CSS styling, “Handling Text Over Images in CSS” by Ahmad Shadeed.

Thank you for joining me in this accessibility journey. We covered many design techniques that will hopefully help you work better with accessible text over images. And if you have some additional tips or advice to share — please do so in the comment section below, or ping me on Twitter (@humbleuidesigns)!

Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

Friday, September 22, 2023