• Success Criterion 1.4.3
  • Conformance level AA

Low-Contrast Text Hiding in Dropdowns, Toasts, and Chips

1.4.3 — Contrast (Minimum)

Scenario

Setting

A budget airline's flight search results

What’s wrong

Text in <option>s, tooltips, toasts, badges, chips overlooked in audits and failing.

Example 

.filter-chip { background: #fef3c7; color: #fcd34d; }
<!-- "Nonstop" chip text at roughly 1.5:1, and the toast notification uses a similarly pale pairing -->

Why it matters

A traveler filtering flight results can't read which filter chips are currently applied and re-selects one by mistake.

How to test

Measure text inside dropdown options, tooltips, toast notifications, badges, and chips specifically — these are commonly skipped in audits.

How to fix

Audit every small component type separately (chips, toasts, tooltips, dropdown options), not just headline body text; this pairing reaches roughly 5.3:1.

.filter-chip { background: #fef3c7; color: #92400e; }

Outcome

The traveler reads their applied filters clearly and narrows results to nonstop flights only.

Who is affected

Low-vision users, who are especially likely to be affected by small, secondary UI elements like chips and toasts that audits often skip.

Learn more

Related scenarios