Skip to content
InsideUX Design

UX glossary · engl. Color Vision Deficiency

Color Vision Deficiency

A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency.

Imagine you’re filling out a form online and click “Submit.” Nothing happens. After a while, you notice that two fields now have a red border. To you, though, that border looks almost exactly like the grayish green border on all the other fields. You’re left guessing what went wrong.

That’s how many people with a color vision deficiency experience interfaces that rely on color alone.

Explained simply

A color vision deficiency (CVD) means someone has a harder time telling certain colors apart than most people. The cause usually lies in the cones of the retina, the sensory cells responsible for color. There are three types, sensitive to long (reddish), medium (greenish) and short (bluish) wavelengths of light. If one type works differently or not at all, certain hues blur together.

Think of a TV where one color setting is off. You still see a colorful picture, but some shades that should be clearly different suddenly look alike.

In everyday language, this is often called “color blindness.” That’s usually misleading: the vast majority of people affected do see color, just differently. According to MedlinePlus, a complete absence of color vision (achromatopsia) affects roughly 1 in 30,000 people.

Types and prevalence

  • Red-green deficiency is the most common type. Reds, yellows and greens are hard to tell apart. According to MedlinePlus, it affects about 1 in 12 men and 1 in 200 women among populations with Northern European ancestry. It’s less common in most other populations studied.
  • Blue-yellow deficiency is much rarer, affecting fewer than 1 in 10,000 people worldwide, and occurs equally across sexes.

Most forms are inherited. A color vision deficiency can also be acquired, though, for example through eye diseases or certain medications.

An example

Here’s an example: a dashboard shows order status with green and red dots and no labels. Someone with a red-green deficiency sees two nearly identical dots and can’t tell which order is stuck.

After the redesign, each dot has a word next to it (“Shipped,” “Problem”), and the problem status also gets a warning icon. The colors stay, but they’re no longer the only source of information.

Why it matters

Success criterion 1.4.1 of the WCAG (Level A) requires that color is not the only visual means of conveying information. This applies to error messages, links within body text, charts and status indicators. You can read more in Color Blindness in UX Design: Guidelines and Tools.

In practice

  • Pair color with a second signal. Text, icons, patterns or underlines make sure the information gets through even without color.
  • Simulate early. Plugins like Stark or the “Emulate vision deficiencies” feature in Chrome DevTools show how your design looks with different types of color vision deficiency.
  • Rely on differences in brightness. Colors with a sufficient contrast ratio stay distinguishable even when the hue blurs.

Related terms

Accessibility, WCAG, Contrast Ratio, Gestalt Principles

Sources

More terms

Full glossary