• Success Criterion 1.4.3
  • Conformance level AA

Selected Tab or Item Text Failing the Contrast Minimum

1.4.3 — Contrast (Minimum)

Scenario

Setting

A job board's application form

What’s wrong

Selected/current item text (e.g., active tab white-on-light-blue) failing.

Example 

.tab.active { background: #93c5fd; color: #ffffff; }
<!-- "Step 2: Experience" label on a light blue background, roughly 1.9:1 -->

Why it matters

An applicant filling out a multi-step form can't read which step they're currently on because the label nearly disappears.

How to test

Measure the currently selected item (active tab, chosen filter) against its own highlighted background — selection styling often drops contrast below default state.

How to fix

Darken the active tab background to roughly 5.2:1 against white text, or switch to dark text on the light blue instead.

.tab.active { background: #1d4ed8; color: #ffffff; }

Outcome

The applicant always knows which step they're on and finishes the application without backtracking.

Who is affected

Low-vision users, who lose their place in a multi-step process when the current-step label is barely visible.

Learn more

Related scenarios