How to make text readable over background images: contrast tips for hero sections
Always add a scrim or gradient overlay behind text on background images. A 40-60% black overlay is the industry standard. Test your result using a contrast checker on screenshots of the actual rendered page, not just the source colors. If you're not willing to darken the image, move the text off the image entirely.
Text over a background image is the most common accessibility failure on the web. Unlike a solid background where you can calculate an exact contrast ratio, images have varying brightness across the surface. White text that's perfectly readable over a dark portion of the photo becomes invisible over a bright sky, and the WCAG contrast formula wasn't designed for this scenario.
By TechCompare · Updated
How this is calculated
The practical solution is to add a scrim: a semi-transparent dark overlay between the image and the text. A black overlay at 40-60% opacity is usually enough to ensure white text remains readable across the entire image. CSS gradient overlays (linear-gradient) let you darken just the portion of the image that sits behind text, preserving the image's impact elsewhere. The key principle: if you can't guarantee the background under every character of text, add an overlay that makes the effective background uniform.
Verdict
Always add a scrim or gradient overlay behind text on background images. A 40-60% black overlay is the industry standard. Test your result using a contrast checker on screenshots of the actual rendered page, not just the source colors. If you're not willing to darken the image, move the text off the image entirely.