How To Design For Color Blindness

In partnership with

Powered by the next-generation CRM

Connect your email, and you’ll instantly get a CRM with enriched customer insights and a platform that grows with your business.

With AI at the core, Attio lets you:

1. Prospect and route leads with research agents

2. Get real-time insights during customer calls

3. Build powerful automations for your complex workflows

👉 Try Attio Pro for free

Hey, it’s Kushagra. Welcome to this week’s AtlasMoth drop.

Most designers obsess over color palettes.

But here’s a thought: what if your favorite combo looks completely different to someone else?

According to studies, around 1 in every 12 men (and 1 in every 200 women) is color-blind.

They see the world just as clearly, just not in the same shades of red, green, or blue.

And yet, so many interfaces quietly exclude them.

Not because we mean to. But because we forget that design isn’t just about how things look, it’s about how things work for everyone.

So here’s how to make your design truly accessible for every user who lands on it:

💬 Building for people beyond borders? Book a call to explore more

1. Use patterns and textures

Data visualizations are color-heavy by nature. But when contrast is low, color-blind users struggle to tell one segment from another.

Here’s what to do instead:
🔸Add patterns and textures to graphs and charts so every section feels distinct.
🔸Add text labels to make data instantly readable.

Design should explain itself, not make people guess.

2. Underline your links

We love changing link colors or font weights. But for someone with monochromacy, that subtle tweak? Invisible.

They can’t tell text from a hyperlink unless they hover over it.
So here’s a simple fix: underline links.

It’s a tiny change that turns “I can’t find it” into “Oh, there it is.”

3. Make primary buttons stand out

Ever noticed how navigation bars often use filled colors for active states?
That’s a nightmare for color-blind users; they can’t easily spot what’s selected.

Instead:
🔸Use outlined icons for inactive states and filled icons for active ones.
🔸Or underline the active icon for instant clarity.

Accessibility isn’t about adding more; it’s about making meaning obvious.

Read newsletters, not spam

Proton Mail gives you a clutter-free space to read your newsletters — no tracking, no spam, no tabs.

Newsletters without the noise

4. Avoid tough color combinations

Some color pairs are basically optical traps for color-blind users.
Here are a few to skip:
🔸Green & Black
🔸Green & Grey
🔸Blue & Grey
🔸Light Green & Yellow
🔸Green & Blue
🔸Blue & Purple
🔸Green & Brown
🔸Green & Red

Introducing the first AI-native CRM

Connect your email, and you’ll instantly get a CRM with enriched customer insights and a platform that grows with your business.

With AI at the core, Attio lets you:

• Prospect and route leads with research agents

• Get real-time insights during customer calls

• Build powerful automations for your complex workflows

Join industry leaders like Granola, Taskrabbit, Flatfile and more.

👉Try Attio Pro for free

The takeaway

Designing for color-blind users doesn’t just make your product inclusive; it makes it better for everyone.

Here’s your quick checklist:
🔸Use patterns and textures in charts and graphs.
🔸Use symbols and colors together for error messages.
🔸Add text labels to filters and swatches.
🔸Underline links to separate them from normal text.
🔸Avoid poor contrast color pairs (like green-red, blue-purple).
🔸Use size, placement, and weight to make primary buttons stand out.
🔸Mark required fields with symbols (like an asterisk).