Perceivable · Level A · 1.4.1
Use of Color
If color is the only thing carrying a piece of information — a required field, an error, which data series is which — someone who can't distinguish that color gets nothing. Color can still be the primary visual cue, as long as a second cue carries the same information.
- Low vision
- Color blindness
How to recognize it
Turn the page to grayscale (browser devtools has a color-vision-deficiency simulation, or a quick CSS grayscale filter works as a rough check) and see what information disappears. Common failures: a required form field marked only with a red border or a red asterisk, with no text saying 'required' anywhere; an error state shown only as a red outline, with no error icon or error message near the field; a chart with several data series distinguished only by hue, with a legend that's just colored squares and no patterns, shapes, or direct labels; instructions like 'click the green button to continue, the red one to cancel.' This is a different failure from a contrast problem — a red asterisk can have perfect contrast against its background and still fail this criterion, because the issue isn't how visible the red is, it's that red is the only signal at all. Red/green specifically is the worst possible pairing for this: it's the traffic-light convention everyone reaches for for 'bad/good' or 'error/success', and it also happens to be exactly the pair that red-green color blindness — deuteranopia and protanopia, the most common forms — makes hardest to tell apart. A status system built entirely on red-means-bad, green-means-good fails for a meaningful share of users even before you get to whether a second cue exists at all.
How to fix it
Pair every color-only signal with a second cue. A required field gets the word 'required' (visibly or via aria, not just a red mark); an error gets an icon and explanatory text next to the red outline, not just the outline. A chart's series get distinct shapes, patterns, or direct labels on the lines themselves, not just colored legend swatches. Links stay underlined rather than distinguished by color alone — text color changes when someone can't perceive that color, so the underline is what actually survives. None of this means removing color: color coding is genuinely useful and fine to keep, it just can't be the only channel the information travels through.
Example
Avoid
<label>Email</label>
<input required style="border-color: red;"><span class="status-dot status-dot--error"></span> Payment<span style="color: red">Mary</span> <span style="color: blue">Tom</span>
<!-- the only key distinguishing two otherwise-identical lines on the chart -->Prefer
<label>Email <span aria-hidden="true">*</span> <span class="visually-hidden">(required)</span></label>
<input required style="border-color: red;"><span class="status-dot status-dot--error" aria-hidden="true"></span> <strong>Error:</strong> Payment failed<span>● Mary</span> <span>▲ Tom</span>
<!-- distinct marker shapes in addition to color, so the key survives without hue -->