- 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
<span class="required-field"></span> <!-- red asterisk only -->Why it matters
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare.
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
Include the color-conveyed information (which item is which) in the text alternative itself.
<span class="required-field">* <span class="visually-hidden">required</span></span>Color alone (a red dot or border) can't be the only signal — pair it with text or an icon plus label.
Outcome
On a news outlet's article page, this barrier is gone for people with color-vision deficiency — they get the same result as anyone else here.
Who is affected
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- In-Text Links Distinguishable From Body Text Only by Color
- Required or Error Fields Marked Only by a Red Border
- Chart Data Series Told Apart Only by Line or Bar Color
- Online/Offline Status Shown Only as a Colored Dot
- Form Validation That Turns Borders Red as the Only Cue
- Calendar Availability Shown Only Through Colored Cells