3 simple tips to make text over image more readable

Make the text on the image more readable with 3 simple techniques.

If you add text over an image, make sure there is enough contrast to make it readable. Subtle changes may be made to boost contrast without changing the overall aesthetic of the site.

The Web Content Accessibility Guidelines (WCAG) is an internationally recognized standard created by the World Wide Web Consortium (W3C), and WCAG calculates it as a ratio describing the relative luminance of the text and background.

Let’s then see 3 tips to make text over image accessibility better in HTML using CSS.

The importance of good contrast in making text over images readable

1. Individuals who have impaired sight frequently struggle to read text that does not contrast well enough with its background.
2. Colorblind students have a tough time reading material that lacks adequate color contrast.
3. Many older people have trouble distinguishing colors and require high contrast to understand the content.
4. Users who use their devices in direct sunlight will benefit from high color contrast as well.

Let’s make text in images more readable.

Enhancing accessibility: Techniques for making text over images clearer

Text over an image does not have to be avoided entirely, but special care must be made to ensure that the text is both legible and readable to users. When reading text becomes hard, readers must choose between straining their eyes and skipping over the content. Let’s explore small design tweaks to boost the contrast between the text and the background.

Text shadow

In some situations a text shadow or stroke can be used to maximize accessibility and maintain the contrast ratio between the text and the background. It is mentioned as a technique for meeting the Success Criterion 1.4.3 (Contrast (Minimum)):

[…] if a letter is lighter at the top than it is a the bottom, it may be difficult to maintain the contrast ratio between the letter and the background over the full letter. In this case, the designer might darken the background behind the letter, or add a thin black outline (at least one pixel wide) around the letter in order to keep the contrast ratio between the letter and the background above 4.5:1.

Here we’ll use the following CSS approach:

text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

Text stroke

Here we’ll use the following CSS approach:

-webkit-text-stroke: 1px #000;
text-stroke: 1px #000;

Text shadow vs text stroke comparison

Black solid layer with opacity

Here we’ll use the following CSS approach:

background: rgba(0, 0, 0, 0.65);

Browsers that improve readability of text on images

There are several browsers that offer features to make text on images more readable. Here are a few examples:

1. Microsoft Edge: Microsoft Edge provides an Immersive Reader feature that offers a cleaner layout with fewer distractions. Users can change the text size and page theme to make reading more comfortable. Additionally, Microsoft Edge can detect unlabeled images and generate descriptions that can be read aloud by screen readers.
2. Mobile Browsers: Many mobile browsers apply a text inflation algorithm to enlarge text on images to make it more readable. For example, when an element containing text uses 100% of the screen’s width, the algorithm increases the text size without modifying the layout. This behavior can be disabled or modified using the text-size-adjust property in CSS.

3. Zoom and Resizing Text: Users with low vision may prefer to have their browser resize text or zoom into page content to make it easier to read. Browsers like Safari, Chrome, Firefox, and Microsoft Edge offer options to zoom or resize text.

   Instructions for how to zoom or resize text in common browsers:

   • Safari: Zoom in on web pages in Safari on Mac
   • Chrome: Change text, image & video sizes (zoom)
   • Firefox: Font size and zoom – increase the size of web pages
   • Microsoft Edge: Increase default text size

   It’s important to remember that depending on the browser and device being used, some functions might not always be available. Users who want to improve the readability of text on images can look through the accessibility settings of their favourite browser.

In terms of the web application you can experiment with mix-blend-mode CSS property. It is used to determine how an element’s content should blend with the content of its parent and the element’s background. It allows for various blending effects to be applied, such as multiplying colors, overlaying content, darkening or lightening, and more.

Recap and next steps

With all of these techniques the trick is getting the right combination of shadow color, blur radius, text stroke, or background color with opacity. Keep experimenting until you get it looking the way you want. Once it’s done make sure to perform cross-browser tests. Note that the final rendering may look a little different from browser to browser.

You may also want to use the tool Text over image accessibility checker.

Finally, there are undoubtedly many other interesting techniques. If you find others, please share them in the comments.