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 a background 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 more readable.

Why making good contrast is important?

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.

Tips

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

Summary

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.