Colour-Blind Friendly Palettes: Beyond Basic Contrast
Learn how to select and combine colours that work for all types of colour blindness. We break down the science and show practical examples you can use today.
Why Colour Matters More Than You Think
Roughly 1 in 12 men and 1 in 200 women experience some form of colour vision deficiency. That’s not a small group. It’s your users, your audience, your customers. When you’re designing interfaces, choosing brand colours, or building data visualizations, ignoring colour blindness isn’t just poor practice — it’s actively excluding people from your work.
Thing is, most designers learn the same tired advice: “just make sure there’s enough contrast.” But contrast alone doesn’t solve the problem. A high-contrast palette that relies on red and green will still fail for people with red-green colour blindness, which accounts for about 99% of colour vision deficiencies. We need a smarter approach.
Understanding the Different Types
Before we dive into solutions, you need to understand what you’re actually designing for. There are three main categories of colour blindness, and they don’t all affect people the same way.
Red-Green Deficiency (Dichromacy)
The most common form. People see reds and greens as variations of yellow or brown. That Christmas colour scheme you love? They’re seeing muddy browns instead. This affects about 8% of men and 0.4% of women.
Blue-Yellow Deficiency
Less common but still significant. Blues and yellows appear shifted or confused. The good news? It’s easier to design around since most interfaces don’t rely heavily on blue-yellow distinctions.
Complete Colour Blindness
Extremely rare — people see only in shades of grey. If you can design for this, you’ve basically cracked the code for everyone else. Monochromatic palettes with strong contrast become your foundation.
Four Core Principles for Colour-Blind Friendly Design
Never Rely on Colour Alone
If red means “error” and green means “success,” you’ve already failed half your audience. Add icons, patterns, or text labels. A red circle with an X inside works. A red circle alone doesn’t.
Use Sufficient Luminance Contrast
This isn’t just about making text readable. It’s about distinguishing different elements. A dark blue on a dark purple might have high colour contrast but low luminance contrast. They’ll look the same to someone with colour blindness.
Test With Real Tools
Don’t guess. Use colour blindness simulators like Color Oracle or Coblis. Run your designs through them. You’ll spot problems you’d never catch otherwise. Takes about 5 minutes and saves you from embarrassing oversights.
Choose Accessible Base Colours
Some colours just work better. Blues, yellows, blacks, whites, and greys are generally safer. Avoid red-green combinations. When you need multiple colours, space them far apart on the colour wheel rather than next to each other.
Building Your Accessible Palette
Let’s get concrete. You’re starting a new project. Here’s how you actually build a colour-blind friendly palette that doesn’t look boring or feel forced.
Start with Your Neutrals
Every good palette starts here. You need a solid dark (navy, charcoal, black), a solid light (white, off-white), and greys in between. These form your foundation and they work for everyone. You’re not relying on colour to distinguish them — you’re using luminance. Get this right and you’ve solved 60% of your accessibility challenges already.
Add Your Accent Colours Strategically
Once you’ve got neutrals locked, add 2-3 accent colours maximum. This is where most designers go wrong. They pick 6 colours and expect them all to work together. Stick to blue, teal, and gold. Or navy, orange, and cream. The key is spacing — colours that are far apart on the colour wheel are more distinguishable for people with colour blindness.
Here’s a working palette we’ve tested with colour blindness simulators: Navy (#1e3a8a) for primary, teal (#0d9488) for secondary, and gold (#d97706) for accent. That’s your entire palette. Everything else is neutral. And it works across all colour blindness types because the luminance values are distinct — navy is dark, teal is medium, gold is light-ish.
Tools That Actually Help
You don’t need to be a colour science expert. These tools do the heavy lifting for you. Most are free or cheap. All are worth your time.
Color Oracle
Desktop app that simulates colour blindness in real-time. Open any design and see exactly how it looks to someone with each type. This is the gold standard. Download it, run it, you’re done.
WebAIM Contrast Checker
Quick online tool. Paste two hex colours and it tells you the contrast ratio. WCAG AA requires 4.5:1 for text, 3:1 for larger elements. You need both colour contrast and luminance contrast, but this gives you the second part.
Coblis — Colour Blindness Simulator
Upload an image or screenshot and it shows you how it looks with different types of colour blindness. Browser-based, no installation needed. Brilliant for quick checks on finished designs.
Accessible Colors
Web-based tool specifically designed for building accessible palettes. Input your primary colour and it generates complementary colours that work for colour-blind users. Takes the guesswork out.
Applying This to Real Work
Theory is great. Actual implementation is what matters. Let’s say you’re redesigning a dashboard with status indicators. Red means warning, green means healthy, blue means inactive. Don’t do that. Instead:
- Warning: Dark red (#dc2626) with an exclamation icon
- Healthy: Dark green (#059669) with a checkmark icon
- Inactive: Grey (#6b7280) with a dash icon
Now you’re using colour plus shape plus tone. Even if someone can’t distinguish the reds from the greens, they’ve got the icons to fall back on. And the dark green and dark red have different luminance values, so they’ll still be somewhat distinguishable even without the colour information.
Or take data visualization. You’re making a pie chart with 5 slices. Don’t use 5 different colours. Use navy, teal, gold, light grey, and white. These work across all colour blindness types because they’re spaced across the full luminance spectrum, not clustered in one area.
The Real Win: Better Design for Everyone
Here’s what most designers don’t realize: designing for colour blindness doesn’t mean your design gets worse. It gets better. You stop relying on colour as a crutch. You add icons and patterns. You think harder about contrast and hierarchy. You end up with something that’s clearer, more usable, and more professional-looking.
That’s the actual secret. Colour-blind friendly design isn’t a constraint. It’s a design methodology that forces you to be intentional about every choice. And when you’re intentional, you’re designing better work.
Start with one project. Pick a palette from the accessible colour libraries. Run it through a colour blindness simulator. Add icons or patterns wherever colour carries meaning. See what happens. You’ll be surprised at how much better your work becomes when you’re not relying on colour alone.
Related Articles
Disclaimer
This article provides educational information about colour-blind friendly design practices and accessibility principles. While we’ve tested these recommendations with colour blindness simulators and referenced WCAG guidelines, individual colour perception varies significantly. We recommend testing your designs with real users and using the tools mentioned in this guide to validate your work. For specific accessibility requirements in your region or industry, consult official accessibility standards and consider working with accessibility specialists. This content is informational and not a substitute for professional accessibility consulting or legal advice regarding compliance requirements.