• Success Criterion 1.4.1
  • Conformance level A

Chart Data Series Told Apart Only by Line or Bar Color

1.4.1 — Use of Color

Scenario

Setting

A job board's application form

What’s wrong

Charts/graphs where series are distinguished only by color (no patterns, labels, or direct data labels).

Example 

<div class="skills-chart">
  <div class="bar" style="background:#16a34a; height:80%"></div>
  <div class="bar" style="background:#eab308; height:45%"></div>
  <div class="bar" style="background:#dc2626; height:20%"></div>
</div>
<!-- green/yellow/red bars show skill match strength, no numbers or labels -->

Why it matters

An applicant checking their skills-match score can't tell which bar means "strong" and which means "needs work."

How to test

View a chart in grayscale: if the series lines/bars become indistinguishable without color, and there's no pattern, label, or direct data label, it fails.

How to fix

Print the percentage on or beside every bar so the value never depends on reading the color.

<div class="skills-chart">
  <div class="bar" style="background:#16a34a" aria-label="JavaScript: 80% match">80%</div>
  <div class="bar" style="background:#eab308" aria-label="SQL: 45% match">45%</div>
</div>

Outcome

An applicant sees their exact match percentage per skill and knows which ones to highlight in their cover letter.

Who is affected

Colorblind applicants who can't separate green from red, and screen reader users who get no equivalent data.

Learn more

Related scenarios