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

A QA pass on a hotel booking site's room-selection page turns this up: 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).

Why it matters

Low-vision and older readers, plus anyone viewing a dim or sunlit screen. On a hotel booking site's room-selection page, that means they can't perceive the control's boundary or state.

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.

Outcome

With the fix in place on a hotel booking site's room-selection page, they 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)
Technique Related technique (opens in a new tab)