Use of Color
Color cannot be the only visual thing telling you something. The alternative has to be visible, and that is the half people miss. Adding an ARIA attribute to a red-bordered field does nothing for this rule, since the person it fails is looking at the screen. The mechanism most people miss is lightness. Two colors that differ in hue and also differ enough in brightness to reach 3:1 are not color alone, because the difference survives without color vision. A light green and a dark red pass on exactly that basis. It is also why a grayscale test works. Grayscale keeps lightness and throws hue away, so anything you can still tell apart in grayscale was never leaning on hue.
Why it matters
Around 1 in 12 men live with some form of color vision deficiency, a figure usually quoted for men of Northern European descent. A mid-sized store serves thousands of them a year and never hears about it. When a red border is the only sign something went wrong, those customers see a form refusing to submit for no visible reason, and plenty of them leave rather than guess. A second cue costs almost nothing and takes the guesswork out for everybody, including anyone reading a grayscale e-ink screen or a phone in bright sun. One limit is worth knowing before you buy the cheapest fix. Passing this rule on lightness alone leaves the same information invisible to a screen reader, so the field that is now distinguishable is still not announced as required.
Who this rule protects
Colorblind users, roughly 8% of men and 0.5% of women, are the group this rule was written for, and most of them use no assistive technology at all. Low-vision users and older users hit the same wall whenever a difference is carried by hue. So does anyone on a monochrome or limited-color display, an e-ink reader, or a phone in harsh sunlight.
How to check it yourself
- View key pages in grayscale using an operating system color filter and confirm you can still find links, errors, required fields and chart series.
- For a link inside a paragraph, measure the link color against the surrounding body text. Either it carries an underline or another non-color cue, or it reaches 3:1 against the text around it. Take the second route and it also needs a visible cue on hover and one on focus.
- Check any non-color cue is present all the time. A cue that appears only on hover or only on focus is still a failure, because a reader has to find the link before they can point at it.
- Check error messages and required-field markers carry text or an icon rather than a red border on its own.
- For charts, check each series is identifiable without hue, through direct labels, patterns, or a lightness difference of at least 3:1 between neighboring colors.
- Where a reader has to identify a particular color rather than just tell two things apart, the lightness escape does not apply. Green for valid and red for invalid needs a second indicator whatever the contrast between them is.
- Read the alt text on any image carrying information through color, and check the words include what the color was saying.
Failures we see most often
- In-text links are styled by color alone and disappear entirely once the page is converted to grayscale.
- A link is marked by an underline that appears only on hover, so a reader has to already know the link is there.
- A form states "fields in red are required" and no field carries a marker of its own.
- A line chart shows four data series that differ from each other only by hue, with no labels and no patterns.
- A chart's alt text names the subject and leaves out which color is which series, which fails 1.1.1 at the same time.
- Success and failure states differ only by turning green or red, which asks a reader to identify a color rather than tell two things apart.
- A link that opens in a new window is marked by color alone, with no icon and no wording saying so.
Who this one is for
Read from this rule's own note above, so the grouping and the note cannot disagree.
- Low visionpeople who can see the screen but not easily
How to fix it
- Underline links in running text. It is the cheapest fix, it survives grayscale, and it needs no measuring.
- Or hold 3:1 between the link color and the surrounding text, then add a visible cue on hover and another on focus. That is a documented route, and the one most design systems actually take.
- Bold works too, because weight is not color. A different font style works for the same reason.
- Pair every color signal with words or an icon. "Enter a valid email" beside a warning icon says the thing the red border was trying to say.
- Label chart series directly, or use patterns, or pick colors that differ in lightness as well as in hue.
- Do not stop at the visible fix. A required field still has to be announced as required, which is 1.3.1, 3.3.1 and 4.1.2 asking for a separate line of code.
Step-by-step fix guides (9)
Passes vs. fails
Passes
"Sale: $39 (was $59)" carries the meaning in words, and the color decorates a fact the text already states.
Fails
A sale price is shown by turning green, with nothing else marking the change, so in grayscale it is just a price.
In audits and lawsuits
There is no approved automated rule for this criterion. None at all. A scanner can list every color pairing on a page, and no scanner can tell you which of those pairings carries meaning, which is the only question here. Our reviewers convert every audited page to grayscale, and whatever information disappears becomes the finding. One exemption saves work every time. Where color alone separates visited links from unvisited ones, that is not a failure at any contrast, because browsers deliberately limit what an author can do with the visited state. The link text still owes its ordinary contrast against the page background.