What Is Color Blindness?
Color blindness -- more accurately called color vision deficiency (CVD) -- is a condition where a person cannot perceive certain colors or distinguish between them the way most people do. It is not actual blindness. People with CVD see the world in color, but their color palette is different from what someone with typical color vision sees.
The condition is overwhelmingly more common in men than women because the most frequent types are caused by genes on the X chromosome. Roughly 8 percent of men of Northern European descent and about 0.5 percent of women have some form of color vision deficiency. The prevalence varies across ethnic groups, but it is a significant percentage of any audience.
To put that in perspective: if your website gets 1,000 visitors a month and your audience skews even slightly male, around 40 to 80 of those visitors likely have some degree of color vision deficiency. That is not a rounding error -- it is a meaningful segment of your audience.
Types of Color Vision Deficiency
Color vision relies on three types of cone cells in the retina, each sensitive to different wavelengths of light: red (long), green (medium), and blue (short). Color vision deficiency occurs when one or more cone types are absent or malfunction.
Protanopia and Protanomaly (Red-Weak)
Affects the red cone cells. People with protanopia have no functioning red cones, while those with protanomaly have red cones that respond abnormally. Red appears darker and can be confused with green, brown, or black. Affects roughly 1 percent of males.
Web impact: Red text on dark backgrounds may be nearly invisible. Red-green status indicators (like traffic light colors) are unreliable.
Deuteranopia and Deuteranomaly (Green-Weak)
Affects the green cone cells. This is the most common form of color vision deficiency. People confuse greens with reds, and both may appear as yellowish-brown. Deuteranomaly alone affects roughly 5 percent of males.
Web impact: Green success messages and red error messages can look nearly identical. Charts using red and green to represent different data series are unreadable.
Tritanopia and Tritanomaly (Blue-Weak)
Affects the blue cone cells. This is much rarer than red-green deficiency, affecting roughly 0.01 percent of the population regardless of sex. People confuse blue with green and yellow with violet.
Web impact: Blue links on certain backgrounds may be hard to distinguish. Blue-yellow color coding is unreliable.
Achromatopsia (Complete Color Blindness)
Extremely rare (roughly 1 in 30,000). People with achromatopsia see the world in grayscale. They also typically have reduced visual acuity and sensitivity to bright light.
Web impact: Any information conveyed solely through color differences is completely lost.
What WCAG Says About Color
The Web Content Accessibility Guidelines (WCAG 2.2) include several success criteria that directly address color usage:
- 1.4.1 Use of Color (Level A): Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This is the most fundamental color accessibility requirement.
- 1.4.3 Contrast Minimum (Level AA): Normal text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt or 14pt bold) needs at least 3:1.
- 1.4.6 Enhanced Contrast (Level AAA): Normal text has a 7:1 contrast ratio; large text has 4.5:1. This higher standard benefits users with low vision and color deficiency.
- 1.4.11 Non-Text Contrast (Level AA): User interface components (like form field borders, buttons, and icons) and meaningful graphics must have at least a 3:1 contrast ratio against adjacent colors.
Design Strategies for Color Accessibility
Designing for color vision deficiency does not mean avoiding color. It means ensuring color is never the only way you communicate information. Here are practical strategies:
Never Rely on Color Alone
This is the single most important principle. Every piece of information conveyed through color should also be conveyed through at least one other visual channel:
- Error states: Use an error icon, bold text, or a border change alongside the red color. Do not just turn the text red.
- Success states: Add a checkmark icon or a text label saying "Success" alongside the green color.
- Required fields: Use an asterisk or the word "required" instead of only changing the label color.
- Links in body text: Underline links or use a non-color indicator. A blue link in black text meets the color-alone requirement only if the contrast between the link color and surrounding text is at least 3:1 and an additional non-color indicator (like underline) is present on hover or focus.
- Charts and graphs: Use patterns, textures, labels, or different line styles in addition to different colors. A pie chart that relies solely on color coding is unreadable to many users.
Choose Color Combinations Carefully
Some color combinations are particularly problematic for people with CVD:
- Avoid: Red/green, red/brown, green/brown, blue/purple, green/blue, light green/yellow
- Prefer: Blue/orange, blue/red, blue/yellow, dark/light variations of the same hue
High contrast between colors helps everyone. When two colors are far apart in brightness (not just hue), they remain distinguishable even when the hue information is lost.
Use Sufficient Contrast
Meeting WCAG contrast ratios helps people with color vision deficiency, low vision, and people viewing screens in bright light. Tools like the WebAIM Contrast Checker make it easy to verify your color combinations. The minimum for normal body text is 4.5:1 against the background.
Add Texture and Shape
In data visualizations, dashboards, or any color-coded system, add a second visual dimension. Use different shapes for data points, different line styles (solid, dashed, dotted) for chart lines, or patterns (stripes, dots, crosshatch) for filled areas. This ensures the information remains clear regardless of color perception.
How to Test for Color Blindness Issues
You do not need to have color vision deficiency to test for it. Several tools simulate what your design looks like through different types of CVD:
Browser-Based Tools
- Chrome DevTools: Open DevTools, press Ctrl+Shift+P (Cmd+Shift+P on Mac), type "Emulate vision deficiency," and choose from protanopia, deuteranopia, tritanopia, and achromatopsia. This applies real-time simulation to the entire page.
- Firefox Accessibility Inspector: Firefox includes a color vision simulator in its accessibility tools.
Standalone Tools
- WebAIM Contrast Checker: Tests foreground/background color combinations against WCAG contrast requirements.
- Stark: A plugin for Figma, Sketch, and Adobe XD that simulates color blindness and checks contrast.
- Color Oracle: A free desktop application that applies a full-screen color blindness filter to whatever you are viewing.
The Grayscale Test
A quick and effective check: view your website in grayscale. On macOS, go to System Settings, Accessibility, Display, Color Filters, and enable Grayscale. On Windows, go to Settings, Ease of Access, Color Filters, and select Grayscale. If any information or functionality is lost when viewed in grayscale, you have a color dependency that needs to be fixed.
Real-World Examples
Here are common color-related problems found on small business websites:
- Form validation: Error messages that only turn the input border red. Solution: also show an error icon, a text message, and change the border style (not just color).
- Sale pricing: Showing the old price in black and the sale price in red with no other visual distinction. Solution: add a "Sale" badge or use strikethrough on the old price.
- Status indicators: Using green and red dots to show open/closed or in-stock/out-of-stock. Solution: add text labels or use icons (checkmark/X) alongside the color.
- Navigation highlighting: Showing the active page by changing the menu link color to green. Solution: also underline the active link, use a border, or change the font weight.
- Call-to-action buttons: A green "Buy Now" button on a page with mostly green accents may not stand out. Solution: ensure the button has high contrast and consider adding an icon.