Who It Affects — Roughly one in twelve men and one in two hundred women

People With Color Vision Deficiency

Color can carry meaning — it just cannot be the only thing carrying it. This is the cheapest WCAG failure to fix and one of the most common.

What It's Like

Red for error and green for success is invisible to the most common form of color blindness.

Nothing about the page announces itself as broken. A required field marked only by turning red looks the same as the fields around it. A chart with a six-color legend becomes three or four indistinguishable bands. A status dashboard where green means healthy and red means down is a dashboard of identical dots. Because there is no error message and no assistive technology in the loop, users typically do not report this — they just get it wrong, or give up.

Scale: Color vision deficiency affects roughly 8% of men and 0.5% of women of Northern European descent, with red-green deficiency by far the most common form. (Source: National Eye Institute. Survey-based disability figures undercount — treat this as a floor.)

What they're using

  • Usually none — this group is not using assistive technology, which is exactly why it gets missed
  • Some users apply OS-level color filters or high-contrast modes
  • Browser extensions that simulate or correct color vision
What Breaks

4 barriers we find most often, and the criteria behind them.

Color as the only indicator of state

Form validation shown only as a red border, required fields marked only by a colored asterisk, a legend that maps meaning to hue alone, links distinguished from body text only by color.

Success criteria: 1.4.1 Use of Color A

Charts and maps keyed entirely to hue

Line charts with six similar colors, choropleth maps with a red-to-green scale, pie charts whose legend is a column of swatches. All of these are solvable with direct labels, patterns, or varying lightness.

Success criteria: 1.4.1 Use of Color A · 1.1.1 Non-text Content A

Links inside body text with no other cue

If a link is only a different color from the surrounding text, it needs 3:1 contrast against that text and a non-color cue on hover and focus — or, far simpler, an underline.

Success criteria: 1.4.1 Use of Color A

Instructions that reference color

"Click the green button," "fields marked in red are required," "see the blue line on the chart." Sensory instructions exclude anyone who cannot perceive the sense being referenced.

Success criteria: 1.3.3 Sensory Characteristics A

What Fixes It

The changes that actually remove the barrier.

01

Pair every color with a second signal

An icon, a text label, a pattern, a shape, an underline. The color can stay — it just needs a partner.

02

Label data directly

Put the series name at the end of the line rather than in a swatch legend. It is better for everyone and removes the dependency entirely.

03

Vary lightness, not just hue

A palette that reads as distinct in grayscale reads as distinct to nearly everyone.

04

Stop writing color into instructions

Name the control, not its color. "Select Continue" instead of "click the green button."

Check It Yourself

Three tests you can run before you call anyone.

  • Screenshot the page and desaturate it. Anything you can no longer tell apart is a failure.
  • Use the browser's rendering panel to emulate protanopia, deuteranopia, and tritanopia, then try to complete a form.
  • Read your own error messages and instructions and search for color words.

If any of those go badly, you have your answer and you did not need a vendor to get it. What a vendor is for is the part after: knowing which of the 55 criteria that maps to, how deep it goes, and what it costs to fix properly rather than patch.

Run the Free Checker

Find out how many of these your site has.

We test with assistive technology, not just with a scanner. You get a findings list tied to specific criteria, ranked by who it blocks and how completely.