- Success Criterion 1.4.3
- Conformance level AA
Low-Contrast Text Hiding in Dropdowns, Toasts, and Chips
1.4.3 — Contrast (Minimum)
Scenario
Setting
A budget airline's flight search results
What’s wrong
Text in <option>s, tooltips, toasts, badges, chips overlooked in audits and failing.
Example
This shows up on a budget airline's flight search results: text in <option>s, tooltips, toasts, badges, chips overlooked in audits and failing.
Why it matters
Low-vision and older readers, plus anyone viewing a dim or sunlit screen. In this case (a budget airline's flight search results), they can't perceive part of the content because of how it's displayed.
How to test
Measure text inside dropdown options, tooltips, toast notifications, badges, and chips specifically — these are commonly skipped in audits.
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
Once corrected, a budget airline's flight search results lets them tell the information apart without relying on color.
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