About 300 million people have some form of color vision deficiency. That's roughly 1 in 12 men and 1 in 200 women. If your interface uses color to communicate meaning — and every interface does — some of your users are missing the message.
The good news is that designing for color blindness isn't hard. It doesn't require a special color palette or a separate theme. It requires one habit: never rely on color alone. Everything else flows from that principle.
This guide covers the specific color combinations that cause problems, the design rules that fix them, and how to test your designs before shipping. If you're not sure what types of CVD exist, start with our types of color blindness overview first.
Color Combinations to Avoid
These are the most common problem pairings. Under CVD simulation, these colors either merge into a single shade or become nearly impossible to tell apart.
Red + Green
Indistinguishable for ~8% of men (deuteranopia & protanopia)
Green + Brown
Blend together under deuteranomaly
Blue + Purple
Hard to separate for tritanopia
Red + Orange
Merge for protanomaly
Light Green + Yellow
Near-identical under deuteranopia
6 Rules for Color Blind Friendly Design
Rule 1: Never Use Color Alone
This is the single most important rule. Every piece of information communicated through color must also be available through a second channel: an icon, a text label, a pattern, or a shape difference.
Red trash icon + "Delete" label
Red button vs green button with same text
Rule 2: Maintain High Contrast Ratios
WCAG 2.2 requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ or 14px+ bold). This benefits everyone, not just color blind users. Use our contrast checker to verify.
#1a1a1a text on #ffffff background (21:1)
#999999 text on #cccccc background (1.9:1)
Rule 3: Use Patterns in Charts and Graphs
Data visualizations are the #1 accessibility failure we see. When you have 4+ data series distinguished only by color, they collapse under CVD simulation. Add patterns (dots, dashes, hatching) or direct labels.
Line chart with solid, dashed, and dotted lines + legend
5 colored lines with only a color-coded legend
Rule 4: Design Status Indicators with Icons
Online/offline dots, success/error states, active/inactive toggles — these all typically rely on green vs. red. Add a checkmark for success, an X for error, or change the shape entirely.
✓ green circle = online, ✕ gray circle = offline
Green dot = online, red dot = offline
Rule 5: Underline Links or Use Weight
If your links are only distinguished from body text by color, users with CVD may not see them at all. Underline links, use font-weight changes, or add an arrow/icon.
Blue underlined link text
Blue non-underlined link in black body text
Rule 6: Test with Real Simulation
The best way to catch issues is to see your design through color blind eyes. Use a CVD simulator to check all major types. Even a quick 30-second check catches most problems.
Run deuteranopia + protanopia simulation before every release
Assume your palette is fine because it looks good to you
Building a Color Blind Safe Palette
You don't need to avoid all color. You need to choose colors that remain distinguishable under the three main CVD types. Here's a process that works:
- 1Start with your brand colors. Keep them — they're fine as long as you add secondary cues.
- 2For functional colors (success, error, warning, info), choose hues that vary in brightness, not just hue. A dark red and a light green are easier to distinguish than a medium red and medium green.
- 3Run your palette through a CVD simulator. Check deuteranopia first (most common), then protanopia, then tritanopia.
- 4If any two functional colors merge under simulation, adjust brightness or switch one to a completely different hue family (blue, orange, purple).
- 5Use our palette tool to generate and verify accessible color combinations.
What WCAG Actually Requires
WCAG 2.2 has specific criteria relevant to color blindness:
1.4.1 Use of Color (Level A)
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
1.4.3 Contrast (Level AA)
Text has a contrast ratio of at least 4.5:1 (normal) or 3:1 (large). Use our WCAG contrast checker to verify.
1.4.11 Non-text Contrast (Level AA)
UI components and graphical objects require a 3:1 contrast ratio against adjacent colors.
1.3.3 Sensory Characteristics (Level A)
Instructions don't rely solely on sensory characteristics like color ("click the green button").
Common Questions
Do I need a separate color blind mode?
Usually no. If you follow the "never color alone" principle and maintain WCAG contrast ratios, your design works for everyone without a toggle. Separate modes are a band-aid for inaccessible design.
Can I still use red for errors and green for success?
Yes — just pair them with icons. A red X for errors and a green checkmark for success works perfectly because the icon carries the meaning, not just the color.
What about dark mode?
The same rules apply. In fact, dark mode often improves accessibility because lighter text on dark backgrounds can offer better luminance contrast. Just verify your ratios.
How do I test my designs for color blindness?
Use a Figma plugin like "Color Blind" for quick checks during design, then export and test with RGBlind for full simulation across all 8 CVD types. See our Figma testing guide for step-by-step instructions.
Test Your Design Right Now
Upload your mockup and see it through color blind eyes. Takes 10 seconds.