Designing for Colour Blindness: A Complete Guide

Approximately 300 million people worldwide have some form of colour vision deficiency (CVD). If your website, app, or data visualisation relies on colour alone to communicate information, a significant portion of your audience will struggle to use it.

The good news: designing for colour blindness benefits everyone. Accessible colour choices improve clarity, legibility, and usability for all users — regardless of whether they have CVD.

Colour vision deficiency affects roughly 8% of men and 0.5% of women. In practical terms, this means:

In a team of 20 men, approximately 1–2 will have CVD
In an audience of 1 million, roughly 80,000 men will have some form of red-green CVD
Red-green confusion is the most common form, affecting ~98% of CVD cases

Designing for colour blindness is also increasingly a legal requirement. The Web Content Accessibility Guidelines (WCAG) 2.1 explicitly require that information conveyed using colour must also be available through other means.

The Golden Rule: Never Rely on Colour Alone

The most important principle in CVD-friendly design is simple:

Never use colour as the only means of conveying information.

Always pair colour with at least one other visual cue:

Text labels — explicitly name the category or status
Icons or symbols — use shapes that are colour-independent
Patterns or textures — particularly useful in charts and maps
Position — use spatial arrangement to communicate hierarchy
Shape — use different shapes for different data categories

Avoid Problematic Colour Combinations

Certain colour pairs are particularly difficult to distinguish for red-green colour blind users:

High-Risk Combinations to Avoid

Avoid	Because	Alternative
Red on green	Completely invisible to deuteranopes	Use blue on orange
Green on red	Same issue	Use yellow on blue
Red and green buttons	Cannot tell pass/fail	Add icons (✓/✗) and text
Red and black text	Red may appear as dark grey	Use bold or underline for emphasis
Pink and grey	Appear identical to protanopes	Use blue and grey

Safer Combinations

For users with red-green CVD, blue and orange is the single most reliable accessible colour pair — these hues remain distinct across virtually all types of CVD.

Other safe pairs:

Blue + yellow (excellent for both R-G and B-Y CVD)
Blue + white
Black + yellow (maximum contrast)
Purple + yellow

Data visualisation is where colour blindness has the most significant impact. Common mistakes:

Using red/green for positive/negative values
Using heat maps with red-yellow-green gradients
Distinguishing multiple data series by colour alone

Solutions for Charts

1. Use pattern fills alongside colours Add hatching, dots, or cross-hatching to chart areas so they remain distinguishable even if colours look similar.

2. Label data directly Instead of relying on a colour legend, label data series directly on the chart. This helps all users, not just colour-blind ones.

3. Use a CVD-friendly palette Recommended accessible palettes:

Okabe-Ito palette: specifically designed for CVD accessibility in scientific figures
ColorBrewer palettes: research-backed palettes for maps and charts
Use our Colour Blindness Simulator to verify your charts look distinct under CVD simulation

4. Provide alternative data formats Offer a table view or data download alongside any chart, so users who struggle with visual representation can access the underlying information.

Form Design and UI States

Forms are a particularly high-risk area for CVD users because status indicators commonly rely on colour:

Common Problems

Red border on invalid fields, green border on valid fields
“Status: Active” shown only in green text
Error messages shown only in red

Accessible Alternatives

Validation states:

❌ Don't: Red border = error, green border = success
✅ Do:    Error icon (⚠) + red border + descriptive error text
          Success icon (✓) + green border + "Looks good!" text

Status indicators:

❌ Don't: • (green dot) = Online, • (red dot) = Offline
✅ Do:    ✓ Online, ✗ Offline (or use distinct shapes: ●/○)

Buttons and CTAs:

❌ Don't: Green "Confirm" / Red "Cancel" — looks identical to protanopes
✅ Do:    Label buttons clearly + ensure sufficient contrast + add icons

Colour Contrast Requirements (WCAG)

Beyond colour choice, sufficient contrast ratio is essential for readability. Use our Contrast Checker to verify your combinations.

Requirement	Minimum Ratio	Context
WCAG AA	4.5:1	Normal text (under 18pt)
WCAG AA	3.0:1	Large text (18pt+ or 14pt bold)
WCAG AAA	7.0:1	Enhanced — normal text
WCAG AAA	4.5:1	Enhanced — large text

Important: These ratios are measured between text and background luminance and must be met for all user types — including under CVD simulation.

Testing Your Designs

Always test your designs using multiple methods:

1. Use a CVD Simulator

Upload screenshots to the ColorVision Simulator to see how your designs appear with each type of CVD. Test all four types: protanopia, deuteranopia, tritanopia, and achromatopsia.

2. Use Browser DevTools

Chrome and Firefox have built-in CVD simulation:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Check Contrast Ratios

Run every text/background combination through a contrast checker that also shows CVD simulation.

4. Get Real Feedback

If possible, user-test with actual colour-blind users. CVD users often discover issues that simulations miss.

Platform-Specific Tips

Web Design

Use CSS to add aria-label and title attributes to colour-coded elements
Don’t style :focus states using colour alone
Ensure form error states include icon + text, not just colour change

Data Science & Research

Use the Okabe-Ito colour palette as your default in R, Python (matplotlib), or any charting library
Always include a legend with text labels, even if colours seem self-explanatory

Mobile Apps

iOS and Android both support CVD simulation in their accessibility settings
Test your app with these settings enabled before each major release

Print Design

Don’t rely on red/green traffic-light metaphors for status
Ensure infographics remain meaningful when photocopied in black and white

Recommended CVD-Friendly Tools

Tool	Purpose
ColorVision Simulator	Simulate how any image looks with CVD
Contrast Checker	Check WCAG compliance with CVD preview
Colour Oracle (desktop app)	System-wide CVD simulation overlay
Who Can Use	Simulates contrast ratios across disabilities
Figma Accessibility Plugin	Real-time CVD checks in Figma

Frequently Asked Questions

Does making designs colour-blind friendly require removing all colour? No. Colour can still be used extensively — it just cannot be the only way information is conveyed. Add secondary cues (text, icons, patterns) alongside colour.

Is red-green the only type of colour blindness I need to design for? Red-green CVD covers ~98% of cases, but designing for it also tends to help users with other types. The most inclusive approach is to test with all CVD types using a simulator.

Do colour-blind users use screen readers? Not necessarily. CVD is distinct from blindness. CVD users typically have full visual acuity and do not use screen readers; they need colour-independent visual cues, not alternative text.

What is the best free tool for checking colour blindness accessibility? This site’s Simulator and Contrast Checker are fully free. For Figma, the free “Able” plugin provides real-time contrast checking.