• Success Criterion 1.4.1
  • Conformance level A

Online/Offline Status Shown Only as a Colored Dot

1.4.1 — Use of Color

Scenario

Setting

A nonprofit's donation form

What’s wrong

Status conveyed only by color: red/green dots for offline/online, red row = overdue.

Example 

<span class="status-dot online"></span> Support agent
<style>.online{background:#22c55e;border-radius:50%} .offline{background:#ef4444;border-radius:50%}</style>

Why it matters

A donor deciding whether to wait for live help can't tell if the dot means an agent is available or gone for the day.

How to test

View status indicators (dots, badges) in grayscale: if red/green (or similar) is the only way to tell states apart, it fails.

How to fix

Always pair a status dot with a visible text label, and don't rely on aria-hidden color alone to convey state.

<span class="status-dot online" aria-hidden="true"></span> <span>Agent online</span>

Outcome

A donor sees the words "Agent online" and starts a chat instead of abandoning the donation page.

Who is affected

Colorblind users and screen reader users, since the dot's color carries the only status information on the page.

Learn more

Related scenarios