- Success Criterion 1.4.3
- Conformance level AA
Active Button Styled to Look Disabled With Grey-on-Grey Text
1.4.3 — Contrast (Minimum)
Scenario
Setting
An e-book reader's library page
What’s wrong
Disabled-*looking* styling applied to active controls' text (grey-on-grey but actually operable — no exemption applies).
Example
An e-book reader's library page runs into this exact issue: disabled-*looking* styling applied to active controls' text (grey-on-grey but actually operable — no exemption applies).
Why it matters
Low-vision and older readers, plus anyone viewing a dim or sunlit screen. Here, on an e-book reader's library page, the result is they can't perceive part of the content because of how it's displayed.
How to test
Measure 'greyed out' styled text on a control that is actually still active/clickable: low contrast intended to look disabled still needs to meet the ratio since the control works.
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 e-book reader's library 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