Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.

Free Assessment: Website Performance Assessment

Start the Assessment
... Inbound Marketing Web Design
Close
website performance assessment start

Free Assessment:

Website Performance Assessment
Start the Assessment
Website Performance Assessment
Free Website Course
View Website Performance Assessment
website performance assessment start

Free Assessment:

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

Take this free 10 question assessment and learn how your website can start living up to its potential.

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

By Joe Rinaldi

Joe Rinaldi also recommends this free website performance assessment.

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.

Free Assessment: Website Performance Assessment

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:

    

website performance assessment start

Free Assessment:

Website Performance Assessment
Start the Assessment
website performance assessment start
website performance assessment start

Free Assessment:

Website Performance Assessment

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

Take this free 10 question assessment and learn how your website can start living up to its potential.

Topics:

Web Design
Infographics
User Experience
Published on October 11, 2020

Recent Articles

5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
8 Best Content Management Systems for Digital Marketing in 2022
March 22, 2022 • 9 min read
How Much Does a Website Design or Redesign Cost in 2022?
March 8, 2022 • 9 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
Your 2022 Website Strategy Must Include These 6 Things
February 15, 2022 • 9 min read
11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Does a Great Inbound Marketing Website Look Like in 2022?
January 10, 2022 • 11 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 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
ICYMI: Digital Marketing News Update for July 26, 2021
July 26, 2021 • 6 min read
ICYMI: Digital Marketing News Update for July 19, 2021
July 19, 2021 • 6 min read
What the Heck is Going on With All the Google Updates? (Content Lab, Ep. 54)
July 15, 2021 • 1 min read
8 Best Business Website Designs (Updated for 2022)
July 15, 2021 • 5 min read
ICYMI: Digital marketing news update for July 12, 2021
July 12, 2021 • 5 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
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read