Text sits over an image or gradient
Why it matters
A tool cannot know how much contrast text has when the background is a photo or gradient. It might be fine in one spot and unreadable in another.
How to fix it
Check the text against the lightest and darkest parts it covers. Add a solid or semi-transparent overlay behind the text if in doubt.
.hero__text { background: rgb(14 17 22 / 0.7); color: #fff; }Read the W3C guidance: Understanding 1.4.3 Contrast (Minimum).
This is a check that needs a person. A11yMate flags it for review rather than reporting a failure.
Related rules
- Text does not have enough contrast (WCAG 1.4.3)
- Text misses the enhanced (AAA) contrast level (WCAG 1.4.6)
- Interface component or border has low contrast (WCAG 1.4.11)
- Link is only distinguished by colour (WCAG 1.4.1)
Find this on your own site. A11yMate scans every page and lists where it happens. See pricing or browse all rules.