• Success Criterion 1.4.1
  • Conformance level A

Selected Tab or Toggle Marked Only by a Color Change

1.4.1 — Use of Color

Scenario

Setting

A customer-support live-chat widget

What’s wrong

Selected state (tabs, toggles, swatches, map pins) indicated by color change alone.

Example 

.tab { color: #6b7280; }
.tab.active { color: #0ea5e9; }
<!-- "Chat" and "Help Articles" tabs, active tab only changes text color -->

Why it matters

A shopper switching between the chat and help-articles tabs loses track of which panel is currently open.

How to test

View selected tabs/toggles/swatches in grayscale: if the selected state disappears without color, it fails.

How to fix

Add an underline and aria-selected so the active tab is marked in more than one way.

.tab.active { color: #0ea5e9; border-bottom: 3px solid #0ea5e9; font-weight: 600; }
<button role="tab" aria-selected="true">Chat</button>

Outcome

A customer glances at the widget and immediately knows they're viewing the chat panel, not the help articles.

Who is affected

Low-vision and colorblind users who can't reliably distinguish the two similar blue and gray shades.

Learn more

Related scenarios