Table of Contents
What is Red-Green Color Blindness?
Red-green color blindness is the most common form of color vision deficiency and affects approximately 8 percent of all men and about 0.5 percent of all women. People affected cannot distinguish between red and green colors as well as people with normal color vision. For digital accessibility, this has far-reaching consequences: websites that convey information exclusively through color exclude millions of people.
Red-green color blindness (also called red-green color vision deficiency) is a hereditary disorder of color perception. Affected individuals cannot distinguish between red and green colors as well as people with normal color vision. The term encompasses several forms that differ in type and severity.
Important to understand: This is not color blindness. People with red-green color blindness do see colors – they simply perceive them differently. Red tones appear brownish to them, for example, and green tones appear yellowish. The transitions between colors are less distinct.
The cause is a genetically determined change in the cone cells on the retina of the eye. These sensory cells are responsible for color perception. In red-green color blindness, the absorption spectrum of the affected cones is shifted, so that red and green tones can no longer be clearly distinguished from one another.
Because the relevant genes are located on the X chromosome, men are significantly more likely to be affected. They have only one X chromosome and therefore have no way to compensate for the defect through a second X chromosome. Women would need to carry the defect on both X chromosomes to be affected.
Forms of Red-Green Color Blindness
Red-green color blindness encompasses several subtypes that differ in the type of affected cone cells and the severity of the condition. The four most common forms in overview:
Deuteranomaly (Green Weakness): The most common form of color vision deficiency by far. The M cones (green receptors) on the retina have restricted function. The absorption spectrum is shifted toward the red receptors. People affected have difficulty perceiving green tones correctly and distinguishing them from red tones.
Protanomaly (Red Weakness): The L cones (red receptors) are impaired in their function. Affected individuals perceive red tones less intensely and confuse them more easily with green tones. This form is rarer than green weakness.
Deuteranopia (Green Blindness): A more pronounced form in which the M cones are completely absent or non-functional. Affected individuals cannot perceive the color green at all and see it in shades of gray or brown.
Protanopia (Red Blindness): The L cones are completely absent. The color red is not visible to affected individuals and is perceived as a dark shade of gray or brown.
In a weakness (anomaly), all three types of cones are present but do not function properly. In blindness (anopia), one type of cone is completely missing. Both forms are congenital, incurable, and remain constant throughout life.
Symptoms and Diagnosis
Many affected individuals do not initially notice their red-green color blindness because they perceive their color vision as normal. Problems usually arise only in situations where precise color discrimination is required – for example, when recognizing traffic signals in poor lighting conditions, when identifying color-highlighted text elements, or when distinguishing colored game pieces.
Typical signs of red-green color blindness include confusion of red and green tones, but also of orange, yellow, and brown, as these colors are also mixtures of red and green light. Small color areas, thin lines, and low color saturation make discrimination particularly difficult.
Ishihara Color Plates: The best-known eye test for detecting red-green color blindness. Numbers or patterns made up of colored dots are hidden on circular plates that people with normal color vision can recognize, but affected individuals cannot or perceive differently.
Anomaloscope: A more precise examination by an ophthalmologist. The patient uses sliders to mix the colors red and green to match a given yellow tone. Based on the mixing ratio, the doctor can precisely determine the type and severity of the color vision disorder.
Farnsworth-Munsell Test: In this test procedure, colored tiles must be arranged in the correct sequence. It allows for a differentiated assessment of color discrimination ability.
Why Red-Green Color Blindness is Relevant for Digital Accessibility
In the digital realm, red-green color blindness has direct impacts on website and app usability. Whenever color serves as the only information carrier, barriers are created for approximately 4 million affected individuals in Germany alone.
Typical problem areas on the web: Form fields that mark valid entries only through green highlighting and incorrect entries only through red highlighting are barely distinguishable for affected individuals. Red-green color coding in charts, statistics, or status indicators is equally problematic.
Navigation elements, links, and buttons that change only in color from red to green on hover also remain invisible to many people. Product colors in online shops that are displayed only visually but not labeled also present obstacles.
The Web Content Accessibility Guidelines (WCAG) address this problem in Success Criterion 1.4.1 "Use of Color": Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
The Barrierefreiheitsstärkungsgesetz (Digital Accessibility Act) has required numerous companies since June 28, 2025, to design their digital offerings accessibly. Properly accounting for color vision deficiencies such as red-green color blindness is a critical component of compliance.
Best Practices: Designing Websites for People with Red-Green Color Blindness
The following measures ensure that your website is accessible to people with red-green color blindness.
Never Use Color as the Only Information Carrier
Always supplement color coding with text, icons, patterns, or borders. Error messages in forms, for example, should not only be marked in red but should also be accompanied by explanatory text and a warning symbol.
Ensure Sufficient Contrast
The WCAG require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (Level AA). Even if colors appear different, they may have similar brightness – always check contrasts with appropriate tools.
Avoid Problematic Color Combinations
Avoid red-green combinations as a meaningful distinguishing feature. Instead, use colors with a clear difference in brightness. Orange and yellow should also be used with care, as they are mixtures of red and green light.
Checklist: Barrier-Free Color Design
-
Multiple Encoding: Never convey information through color alone; always supplement with text, symbols, patterns, or shape (WCAG 1.4.1)
-
Check Contrast Values: At least 4.5:1 for normal text and 3:1 for large text and UI components (WCAG 1.4.3 and 1.4.11)
-
Use Simulation: Regularly test your own website with color blindness simulations, such as those in Chrome DevTools or with special testing tools
-
Choose Color Palette Consciously: Use colors with a clear difference in brightness and avoid pure red-green combinations
-
Mark Status with Text: Always distinguish success, warning, and error not only through color but also textually
-
Charts and Graphics: In data visualizations, additionally use patterns, hatching, or labeling
Tools and Resources for Testing
To ensure your website is accessible to people with red-green color blindness, there are various testing tools and simulations that you can integrate into your workflow.
Chrome DevTools: The Chrome browser's developer tools offer a built-in color blindness simulation. Via the Rendering tab, you can emulate various forms of color vision deficiency and test your website directly in the browser.
WAVE (Web Accessibility Evaluation Tool): An automated testing tool that identifies, among other things, missing contrasts and problematic color combinations.
Stark Plugin (Figma): For designers who want to consider accessibility in the design process itself. The plugin checks contrasts and simulates various color vision deficiencies directly in Figma.
Contrast Checker: Online tools such as the WebAIM Contrast Checker or APCA Contrast Calculator calculate the exact contrast ratio between two colors and show whether WCAG requirements are met.
In addition, easyMonitoring from SiteCockpit offers automated testing of your entire website according to WCAG standards – including analysis of color contrasts and color-based information carriers.
SiteCockpit Solution
How easyVision Supports People with Red-Green Color Blindness
easyVision gives users with color vision deficiency the ability to individually adjust the color display of a website. Through the frontend widget, among other things, color saturation can be adjusted, contrasts can be increased, and color profiles can be activated that make red-green combinations more distinguishable.
Red-Green Color Blindness in Everyday Life
Red-green color blindness affects not only the digital realm but also numerous everyday situations. Most affected individuals do not perceive their color vision as particularly limiting because they have no other way of seeing.
Road Traffic: Traffic signals can be harder to distinguish under difficult lighting conditions. However, the position of the lights (red at top, green at bottom) provides an additional orientation aid – a good example of the principle of multiple encoding.
Professional Limitations: Certain professions such as pilot, train driver, bus or taxi driver require perfect color vision and require passing special color vision tests.
Assistive Devices: Special glasses for color blindness can improve the distinguishability of red and green tones by filtering out certain wavelengths of the light spectrum. They do not represent a cure but rather support perception in certain situations.
Relevant WCAG Success Criteria
The Web Content Accessibility Guidelines (WCAG) contain several success criteria that directly relate to red-green color blindness and accessible color design:
WCAG 1.4.1 – Use of Color (Level A): Color must not be the only visual means of conveying information, indicating an action, or distinguishing elements. This criterion is the foundation for accessible color design.
WCAG 1.4.3 – Contrast Minimum (Level AA): Text must have a contrast ratio of at least 4.5:1 to the background. Large text (18pt or 14pt bold and above) requires at least 3:1.
WCAG 1.4.11 – Non-Text Contrast (Level AA): UI components and graphical objects require a contrast ratio of at least 3:1 to adjacent colors. This applies, for example, to buttons, form fields, and icons.
These criteria are also legally binding in Germany through EN 301 549 and the Barrierefreiheitsstärkungsgesetz (Digital Accessibility Act). With easyStatement, you create a legally secure accessibility statement that also documents the handling of color contrasts.
Frequently Asked Questions About Red-Green Color Blindness
Make Your Website Accessible
Check now whether your website is accessible to people with red-green color blindness and other limitations. Start free with SiteCockpit.
No credit card required.