Pair color coding with patterns and shapes
When color difference carries information inside a picture, a chart, or a map, G111 asks you to carry the same information in a pattern as well. Hatching on a bar. A shape on a status dot. A distinct dash on a line. W3C lists this as a sufficient technique for 1.4.1 Use of Color at Level A, with no conditions attached, so doing it settles the color half of that rule for the content it covers. It applies to any technology that supports images. Sufficient does not mean sole. W3C documents four other routes to 1.4.1, and the closest neighbor to this one puts the information in text instead of pattern, which is usually the cheaper answer for anything that is not a picture.
How we find it in an audit
No tool can tell you what a color means on your dashboard, so this is a human pass. Our reviewers pull up every chart, map, status indicator and legend, then ask whether the same reading survives in grayscale. Where it does not, we check whether a pattern or a shape is working alongside the color or whether the color is on its own.
How affected users experience it
Around one in twelve men and one in two hundred women has a color vision deficiency, and red against green is the pairing that most often collapses. For them a status board of colored dots is a board of identical dots. People using high-contrast modes, grayscale printing, or a dim screen in daylight land in the same place. A shape or a hatch pattern survives all of it. It is still there when the color is gone.
Passes vs. fails
Passes
Each status pairs its color with a distinct shape and a written label, so 'On track' is a green circle marked as such and 'At risk' is a red triangle.
Fails
A project dashboard shows status as colored dots and nothing else, green for on track, red for at risk, amber for delayed.
Other ways to satisfy this rule
9 guides on this site are filed under 1.4.1 Use of Color. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- G14sufficientSay in text what color alone signals
- G182sufficientBack up color-coded text with another cue
- G183sufficientMake color-only links contrast and respond
- G205sufficientAdd text cues to color-coded field labels
- C15advisoryStyle the focus indicator instead of removing it
- F13failureDo not write alt text that drops color meaning
This guide is our interpretation of W3C technique G111: Using color and pattern. 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.