• Success Criterion 1.4.1
  • Conformance level A

Wizard Progress Steps Distinguished Only by Color

1.4.1 — Use of Color

Scenario

Setting

A ticket marketplace's seat-selection map

What’s wrong

Wizard progress steps: completed vs — current vs — future differentiated by color only.

Example 

<div class="step done" style="background:#22c55e"></div>
<div class="step current" style="background:#3b82f6"></div>
<div class="step" style="background:#d1d5db"></div>
<!-- Select Seats, Review, Payment: no labels, no checkmark, no aria-current -->

Why it matters

A buyer mid-purchase glances at the wizard and can't tell if they've already reviewed their seats or still need to.

How to test

View a wizard's progress steps in grayscale: if completed/current/future steps become indistinguishable, it fails.

How to fix

Add a checkmark for completed steps, text labels for all steps, and aria-current on the active one.

<div class="step done" aria-current="false"><span aria-hidden="true">✓</span> Select Seats</div>
<div class="step current" aria-current="step">Review</div>

Outcome

The buyer confirms they've already picked seats and moves straight to entering payment details.

Who is affected

Colorblind users who can't separate the green, blue, and gray steps at a glance.

Learn more

Related scenarios