Text over images quiz
Text over images practice
Swipe right if it passes WCAG, left if it fails. Or use the buttons or your arrow keys.
The rule in plain words
WCAG 1.4.3 Contrast (Minimum), on photos and gradients
The contrast rule still applies when text sits on a photo or gradient. The text has to reach 4.5:1, or 3:1 when large, against the parts of the image directly behind it.
Automated scanners usually mark these as needs review, because they cannot see the image. People have to check them.
| What | Needs |
|---|---|
| Normal text on an image | 4.5:1 at the worst spot |
| Large text on an image | 3:1 at the worst spot |
Exceptions people miss
- Text inside the photo itself, like a street sign, when it is incidental to the content.
Common mistakes
- White text over bright skies, snow, sand or pastel backgrounds.
- Dark text over night scenes.
- Checking one spot behind the text instead of the brightest one.
Your turn
Is your own site accessible or not?
Axeazy scans your real pages for WCAG issues like the ones in this deck and opens code fixes, not an overlay. Free scan in 60 seconds, no credit card.
Questions
Text over images, answered
How do I fix text over an image?
Add a dark scrim or gradient behind the text, put the text on a solid label, or move it to a calm part of the image.
Why don't scanners catch this?
Tools like axe-core cannot read pixels behind text in an image, so they flag it for manual review instead of passing or failing it.
Does a text shadow fix it?
It can, if the shadow is strong enough that the text reaches the required contrast everywhere. Measure it.