- Success Criterion 1.4.3
- Conformance level AA
- W3C reference F24
Text Color Set Without a Matching Background Color
1.4.3 — Contrast (Minimum)
Scenario
Setting
A hotel booking site's room-selection page
What’s wrong
The site sets a text color without a background color (or vice versa). If a user applies their own color scheme, text can become invisible (e.g., white on white).
Example
color: #999999; background: #ffffff; /* 2.85:1 */Why it matters
Low-vision and older readers, plus anyone viewing a dim or sunlit screen.
How to test
Use DevTools to find an element with only foreground OR background color set (not both): apply a user/OS dark or high-contrast color scheme and check whether the text becomes unreadable.
How to fix
Always set foreground and background colors together so user color schemes can't create invisible text. color: #595959; background: #ffffff; /* 7:1 */ Normal text needs at least 4.5:1 contrast against its background; large text needs at least 3:1.
Outcome
On a hotel booking site's room-selection page, this barrier is gone for low-vision and older readers — they reach the same outcome without extra effort.
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)
- Technique Related technique (opens in a new tab)
Related scenarios
- 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
- Semi-Transparent Text That Fails the Contrast Minimum