Say in text what color alone signals
Color carries meaning on your page. Red for the fields that failed, green for the sessions in track one, amber for delayed. G14 says put that same meaning into text as well, and W3C counts it as sufficient for the use-of-color rule at Level A, so doing it meets that rule on its own. The text has to be text a person can read, not something revealed on hover and not something living only in an attribute, because the people this protects can see your page perfectly well and simply cannot tell your colors apart. A word beside the swatch, a code after the session name, a number inside the icon. Any of those does the job. And the text does not replace the color. Both stay, and the color goes on working for everyone it already worked for.
How we find it in an audit
Grayscale is the whole test and it takes a browser filter and a second. With the color gone, a reviewer walks the page and checks whether every distinction the design was making is still readable. Charts, status dots, calendars, required-field marks and diff views are where this lives. We also check where the text sits, because a label that appears only on hover fails anyone who never hovers, and text tucked into a title attribute reaches almost nobody.
How affected users experience it
Color vision deficiency is common enough that on a page of any size, somebody is reading it with your color coding switched off. They are not asking for a description, because they can see the page. What they need is the distinction expressed in something other than hue. Screen-reader users need the same information for a different reason, since color reaches them not at all, and one line of text answers both.
Passes vs. fails
Passes
Each failing field turns red and gains a line of text underneath reading Enter a valid postcode.
Fails
Form errors are marked only by turning the field borders red, so colorblind users resubmit and fail again.
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.
- G111sufficientPair color coding with patterns and shapes
- 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 G14: Ensuring that information conveyed by color differences is also available in text. 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.