- Success Criterion 1.4.3
- Conformance level AA
Error or Success Message Text With Too-Low Contrast
1.4.3 — Contrast (Minimum)
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Error/success message text in light red/green on white below 4.5:1.
Example
On an online clothing store's product listing page, a visitor hits this wall: error/success message text in light red/green on white below 4.5:1.
Why it matters
Low-vision and older readers, plus anyone viewing a dim or sunlit screen. Here, on an online clothing store's product listing page, the result is they can't read the text against its background.
How to test
Measure error/success message text (often light red/green) against its background: these frequently fall under 4.5:1 and need checking specifically.
How to fix
The text must meet at least 4.5:1 contrast (3:1 for large text) against its actual background in every state (default, hover, focus, selected).
Outcome
After the fix, the same visitor to an online clothing store's product listing page can now read the text clearly against its background.
Who is affected
Low-vision and older readers, plus anyone viewing a dim or sunlit screen.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text Color Set Without a Matching Background Color
- Text Placed Directly Over a Photo With No Solid Backing
- Body Text Contrast That Falls Below the 4.5:1 Minimum
- Large Heading Text That Still Falls Below 3:1 Contrast
- Placeholder Text With Contrast Too Low to Read Easily
- Text on a Gradient Background Dropping Below Contrast Ratio