How to make text readable over background images: contrast tips for hero sections
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.
Calculator
Contrast Checker
Check color contrast for accessibility.
Large Text
Normal text sample.
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.