Skip to main content
WCAGrules
Quick navigation

Do not write alt text that drops color meaning

F13 is a documented failure and it is filed under two rules at once, non-text content and use of color, which tells you who it hurts. The image conveys something through color differences. The text alternative does not carry it across. The published example is the instructive one, because it fails in the way that survives review. The alt text is long and careful, gives all four sales figures, and even says the red bars are the ones below quota. It still fails, because it never says which people the red bars are. Describing the color is not resolving it. The repair is to write the thing the color was standing for, so the alternative can be read in place of the image without losing anything.

How we find it in an audit

Reviewers find every image where color carries meaning, which usually means charts, status indicators and maps, then read the alt text with the image covered. The question is whether you could act on what you heard. A chart alt reading "sales by region, color coded" fails outright. One that gives every number and never names who is behind fails less obviously and still fails. Automated tools can find images with short alt text. They cannot see color meaning at all, so every one of these findings is written by a person.

How affected users experience it

Three groups lose information here and the largest is the one usually left out. Blind readers get whatever the alt text says and nothing else. Readers with low vision may see the chart and not the distinctions inside it. And people with color vision deficiency see the chart perfectly, in full detail, and cannot tell the red bars from the green ones. That last group is far larger than the other two together. A text alternative that resolves the color serves all three at once.

Passes vs. fails

Passes: alt text names the product. Fails: the file name is all there is.

Passes

<img src="status-chart.png" alt="Project status. Design complete, build on track, testing running two weeks late">

Fails

<img src="status-chart.png" alt="Project status chart">
<!-- Late items are red, on-track items are green, and the alt text says neither. -->

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

The other techniques filed under this rule

39 guides on this site are filed under 1.1.1 Non-text Content. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.

This guide is our interpretation of W3C technique F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations