• 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 

.room-price { color: #ffffff; }
<!-- no background-color set; relies on the page defaulting to white, so a user stylesheet or dark browser theme turns this invisible -->

Why it matters

A guest who applies a dark or high-contrast browser theme sees blank space where the nightly room rate should be.

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 declare a matching background whenever you set a text color (ratio roughly 15.8:1 here), so overrides can't erase one half of the pair.

.room-price { color: #1f2937; background-color: #ffffff; }

Outcome

The guest compares nightly rates clearly no matter what color theme their browser applies.

Who is affected

Users of Windows High Contrast Mode and custom browser color schemes, plus low-vision users relying on forced-color overrides.

Learn more

Related scenarios