--- title: "Color Vision Deficiency" url: "https://www.insideuxdesign.com/en/glossar/color-vision-deficiency" language: "en" description: "What is a color vision deficiency? A plain-language guide to types, prevalence and WCAG 1.4.1. Learn how to design interfaces that work without color." published: "2026-10-14T15:20:34+02:00" updated: "2026-10-14T15:20:34+02:00" --- # 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. - **Buchstabe:** C - **Englischer Begriff:** Color Vision Deficiency 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](https://www.insideuxdesign.com/en/glossar/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](https://www.insideuxdesign.com/en/blog/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](https://www.insideuxdesign.com/en/ressourcen/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](https://www.insideuxdesign.com/en/glossar/contrast-ratio) stay distinguishable even when the hue blurs. ## Related terms [Accessibility](https://www.insideuxdesign.com/en/glossar/accessibility), [WCAG](https://www.insideuxdesign.com/en/glossar/wcag), [Contrast Ratio](https://www.insideuxdesign.com/en/glossar/contrast-ratio), [Gestalt Principles](https://www.insideuxdesign.com/en/glossar/gestalt-principles) ## Sources - [MedlinePlus Genetics: Color vision deficiency. U.S. National Library of Medicine, 2015](https://medlineplus.gov/genetics/condition/color-vision-deficiency/) - [MedlinePlus Genetics: Achromatopsia. U.S. National Library of Medicine, 2025](https://medlineplus.gov/genetics/condition/achromatopsia/) - [W3C WAI: Understanding Success Criterion 1.4.1: Use of Color. W3C, 2025](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) - [Chrome for Developers: What’s New In DevTools (Chrome 83): Emulate vision deficiencies. Google, 2020](https://developer.chrome.com/blog/new-in-devtools-83) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio) [ ### Conversion A conversion is a desired action on a website or in an app, such as a purchase or a signup. The conversion rate shows what share of visits leads to one. ](https://www.insideuxdesign.com/en/glossar/conversion)