- 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
Here's what happens on a news outlet's article page: 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).
Why it matters
People with color-vision deficiency, low vision, or constrained viewing conditions such as strong glare. Here, on a news outlet's article page, the result is they miss information conveyed only by color.
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.
Outcome
After the fix, the same visitor to a news outlet's article page can now read the text clearly against its background.
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