TechCompare LogoTechCompare

How to make text readable over background images: contrast tips for hero sections

Test the rendered background under every part of the text, including the brightest image areas and responsive crops. A 60% black scrim is a useful starting example for white text, not a universal minimum or substitute for checking the result.

Text over a background image can be hard to check because image brightness varies across the surface. WCAG contrast applies to text over images, but a single color sample won't describe every pixel behind a line of text. White text that's readable over a dark part of a photo may disappear over a bright sky, so check the rendered text against the image and any overlay behind it.

By TechCompare · Updated

WCAG level
WCAG AA
Minimum contrast (4.5:1+)
Example ratio
21.0:1
#FFFFFF on #000000
Category
Practical Tips
Accessibility knowledge base
This exact #FFFFFF on #000000 pair, pre-loaded. Edit either color, see the live WCAG ratio, or compare a second pair.
Edit in the full tool

How this is calculated

A scrim is a translucent layer between the photo and text. For opaque white text over an SDR sRGB white background, a 50% black overlay produces about #808080 and only 3.95:1 contrast, below AA normal text. A 60% black overlay produces #666666 and about 5.74:1. Gradients can darken only the text region, but each character still needs a passing background.

Verdict

A photo can have very different luminance beneath different parts of a text line, so one contrast check may miss a bright patch behind a character. WCAG contrast applies to text over images. Check the rendered result across the whole text area and responsive crops. A scrim or gradient can add contrast where needed, but its effect depends on the image and compositing. If no overlay works for every crop, place the text on a solid surface beside the image.

More Contrast scenarios

WCAG AA for normal text
WCAG AA sets a 4.5:1 minimum contrast ratio for normal text (under 18pt or 14pt bold) against its background.
View details ➜
WCAG AAA for normal text
WCAG AAA requires a minimum contrast ratio of 7:1 for normal text, nearly double the AA requirement.
View details ➜
Building accessible palettes
Building an accessible color palette means defining text and background color pairs that pass WCAG AA from the start, rather than retrofitting contrast after design.
View details ➜

Related guides

WCAG AA for normal text
The minimum contrast tier to enforce on text over images.
View guide ➜
Building accessible palettes
How palette tokens help text-over-image scenarios stay compliant.
View guide ➜

Frequently asked questions

How do I check contrast on a gradient background?
Sample the background color directly behind the text at its lightest point. Contrast ratio is measured per-pixel, so use the worst-case (lightest) background under any character of the text for a passing result.
How do I add a scrim overlay behind text on a hero image in CSS?
Layer linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) above the image and below opaque white text. A separate rgba(0,0,0,0.6) overlay works too. On a white sRGB image this gives #666666 and about 5.74:1. A 50% overlay gives only about 3.95:1 and fails AA normal text. Verify rendered output.
What is the minimum scrim opacity for AA compliance?
It depends on the brightest background beneath the text and how colors are composited. For opaque white normal text over a white sRGB background, roughly 54% black is the threshold for 4.5:1. A 60% example leaves margin. Test every responsive crop and gradient region rather than assuming one opacity always passes.

Related tools

Color Picker

Pick colors and convert between HEX, RGB, HSL, CMYK, and HSV formats.

Use tool ➜

JSON Formatter

Validate, format, and minify JSON data with readable output and error detection.

Use tool ➜

Aspect Ratio Visualizer

Visually compare width differences between 16:9, 21:9, and 32:9 monitors.

Use tool ➜