• Success Criterion 1.4.1
  • Conformance level A
  • W3C reference F13

Chart Legend Colors Never Explained in the Image’s Alt Text

1.4.1 — Use of Color

Scenario

Setting

A news outlet's article page

What’s wrong

The alt text describes the image but leaves out information that is shown only through colors in the image (e.g., which line on the chart is which).

Example 

<img src="rates-chart.png" alt="Line chart of unemployment and inflation over time">
<!-- orange line = unemployment rate, teal line = inflation rate, no other distinction -->

Why it matters

A reader following the economy story can't tell which line is unemployment and which is inflation, so the chart's whole point is lost on them.

How to test

Read the alt text for a chart/image using color coding: check it states which color represents which series/item, not just visual appearance.

How to fix

Name each series and its color, plus the key values, directly in the alt text.

<img src="rates-chart.png" alt="Unemployment rate (orange, rising to 5.2%) vs inflation rate (teal, falling to 3.1%)">

Outcome

A screen reader user hears exactly which line tracks unemployment and follows the trend without guessing.

Who is affected

Blind and low-vision screen reader users, plus colorblind readers who also can't separate the two line colors visually.

Learn more

Related scenarios