Free: Assessment Does your website build trust with buyers and bring in revenue?

Score My Website

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.
Score My Website

Free: Assessment

Expert tips on designing for color blindness — from a color-blind designer [Infographic]

By Joe Rinaldi

Expert tips on designing for color blindness — from a color-blind designer [Infographic]

I have a confession to make.

It’s something I never openly admitted until recently, but I’m a walking oxymoron. I’m a color blind graphic designer.

Weird, right?  

I remember being in my kindergarten art class and constantly asking my friends if I was using a blue or purple crayon. I couldn’t figure out why my friends could see the difference and I couldn’t. 

It wasn’t until middle school that I found out it was because I had deuteranopia color blindness. That’s a fancy word for I can’t always distinguish the differences between blues and purples.

As I moved into a career in design, I hid my color blindness. I viewed it as a weakness, something that would just hold me back.

Who would hire a designer who can’t see colors properly?

That all changed a few years ago when I started to learn more about the importance of designing for accessibility and creating an equal web experience for everyone. 

I started to look at being color blind as a superpower. While it’s not nearly as cool as super strength or the ability to fly, it’s actually really powerful in the UX/UI world. 

I learned I’m able to easily spot problematic color combinations and areas that lack enough contrast, which a lot of other designers may overlook. 

It’s also helped me approach web design from a more inclusive perspective. I understand first-hand the pain points and challenges people with accessibility issues face while viewing a website. 

Understanding how to design for color blindness can be a difficult task for those who aren’t colorblind themselves. Luckily, you don’t need to run out and find yourself a colorblind designer. 

We’re awesome, but I’m pretty sure we’re a small pool of people.

Rather, there are a lot of useful guides and resources out there to educate you on the topic and help you deliver a better experience to your users. 

The team over at IMI, a full-service digital marketing agency, put together this insightful infographic that gives people a crash course in designing for color blindness.

The infographic covers topics like the different forms of color blindness, how to design for them, and even includes some tools to help you test your websites color palette. 

The three main forms of color blindness

Before you can start to design for color blindness you need to understand the different forms of it. Your company’s branding might have a color combination that only affects a certain type of color blindness, so it’s important to know who to consider.

1. Protanopia

Protans have difficulties distinguishing the differences between blue and green colors and also red and green colors.

2. Deuteranopia

Deuteranopia is the most common type of color blindness that affects about 6% of the male population. Deuteranopia is also known as “Red-Green Color Blindness,” but the name is slightly misleading. People with Deuteranopia have trouble distinguishing the differences between a number of different colors; not just reds and greens.

3. Tritanopia

People affected by tritan color blindness confuse blue with green and yellow with violet.

UI tips for designing for color blindness

The infographic highlights some simple tips that you can start implementing right away in your designs. Some of the more notable tips include:

Use textures and patterns for contrast

Relying solely on color to differentiate data on graphs and charts may make it hard for colorblind users to decipher. You can use subtle patterns on top of a color to make this data easier to digest.

Use colors AND symbols

When it comes to your forms, people with a certain type of color blindness can have problems seeing red error messages. One way to combat this is to use both colors and symbols where the user's attention is needed.

To see all of the tips and tools you can use to design for color blindness check out the infographic below:


Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.


Web Design
User Experience
Published on October 11, 2020

Recent Articles

Website Conversions in 2023 — STOP, START, KEEP
January 25, 2023 • 5 min read
How Much Does a Website Design or Redesign Cost in 2023?
November 21, 2022 • 9 min read
8 of the Best Business Website Designs to Inspire You in 2023
November 17, 2022 • 7 min read
Take It From an Expert: You Probably Don’t Need a New Website
November 16, 2022 • 4 min read
What Does a Great Inbound Marketing Website Look Like in 2023?
November 14, 2022 • 12 min read
Your 2023 Website Strategy Must Include These 6 Things
November 4, 2022 • 9 min read
4 Ways To Recession-proof Your Website In 2023
November 1, 2022 • 5 min read
8 Best Content Management Systems for Digital Marketing in 2023
October 1, 2022 • 9 min read
12 Essential Tips for Improving Your Web Design in 2023
September 13, 2022 • 16 min read
What Is a Learning Center and Why Does My Website Need One?
July 28, 2022 • 6 min read
23 of the Best Examples of Business Blog Design
May 30, 2022 • 13 min read
5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
11 Pricing Page Examples for Business Websites (Updated for 2023)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read