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

Chart Alt Text That Never Explains What Each Color Means

1.1.1 — Non-text Content

Scenario

Setting

A car-rental site's checkout flow

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="price-breakdown.png" alt="Bar chart of rental price breakdown">
<!-- chart uses color-coded bars: blue = base rate, orange = insurance, green = taxes -->

Why it matters

A renter comparing insurance add-ons by ear can't tell which bar is which if the alt glosses over the legend, so they can't verify the total before paying.

How to test

Read the alt text aloud: if the image uses color to distinguish items (e.g., a chart legend), check whether the alt states which color means what — if not, it fails.

How to fix

Name each color-coded category and its value directly in the alt text. When a chart uses color to distinguish categories, state those categories and their values in the alt text itself, not just "chart shown."

<img src="price-breakdown.png" alt="Price breakdown: base rate (blue) $42, insurance (orange) $15, taxes (green) $8">

Outcome

A screen reader user hears the exact dollar amount tied to each category, and confirms insurance was priced correctly before paying.

Who is affected

Blind and low-vision screen reader users, and colorblind users who also can't distinguish the bars visually, both depend on the text description instead.

Learn more

Related scenarios