• Success Criterion 1.4.3
  • Conformance level AA

Error or Success Message Text With Too-Low Contrast

1.4.3 — Contrast (Minimum)

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Error/success message text in light red/green on white below 4.5:1.

Example 

.stock-message.low { color: #ff8080; background: #ffffff; }
<!-- "Only 2 left in stock!" at roughly 2.6:1, well under 4.5:1 -->

Why it matters

A shopper deciding whether to buy right now misses the urgency message warning that only two items remain.

How to test

Measure error/success message text (often light red/green) against its background: these frequently fall under 4.5:1 and need checking specifically.

How to fix

Darken status colors (roughly 5.9:1 here) since light red or green on white almost never clears the minimum.

.stock-message.low { color: #b91c1c; background: #ffffff; }

Outcome

The shopper notices the low-stock warning and adds the item to their cart before it sells out.

Who is affected

Low-vision users, who need urgency and status messages to be at least as legible as regular product copy.

Learn more

Related scenarios