Services
TAYA

They Ask, You Answer Mastery

A coaching & training program that drives unmatched sales & marketing results.

Sales

Sales Performance Mastery

Improve the competencies and close rates of your sales organization.

Web design

Website Mastery

Web design, development & training for your team.

HubSpot

HubSpot Mastery

Everything you need to get the most from HubSpot.

AI Mastery

AI Enablement Mastery

Unlock the power of AI in all aspects of your revenue operations.

Discover how IMPACT’s services can help take your business to the next level. Book a free 30-minute coaching session Book a free 30-minute coaching session
Learning Center
Learning Center

Learning Center

Free resources to help you improve the way you market, sell and grow your business.

Discover how IMPACT’s services can help take your business to the next level. Book a free 30-minute coaching session Book a free 30-minute coaching session

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

Score My Website
Close

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
Web Design  |   Infographics  |   User Experience

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

Joe Rinaldi

By Joe Rinaldi

Oct 11, 2020

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.

Related Articles

The Website Experience Your Customers Are Yearning For

November 27, 2023
Mary Brown Mary Brown

10 Examples of Company Profile Pages to Inspire Yours

November 22, 2023
John Becker John Becker

Is It Time for an AI-powered Chatbot on Your Website?

November 21, 2023
Will Smith Will Smith

Think of Your Business as ‘E-Commerce’ — No Matter What You Sell

November 15, 2023
John Becker John Becker

8 of the Best Business Website Designs to Inspire You in 2024

November 1, 2023
John Becker John Becker

Your Website in 2024: The Future of Trends, Tech, and Traffic

November 1, 2023
Vin Gaeta Vin Gaeta

Create Better Website Videos by Avoiding These 3 Mistakes

October 25, 2023
Joe Rinaldi Joe Rinaldi

4 Ways To Recession-proof Your Website In 2024

October 22, 2023
Marcus Sheridan Marcus Sheridan

Business Leaders: Do You ‘Own’ Your Own Website?

October 16, 2023
Mary Brown Mary Brown

Can I Use AI Tools To Build My New Website?

September 18, 2023
Vin Gaeta Vin Gaeta

What Is a 'Learning Center' and Why Does My Website Need One?

September 14, 2023
John Becker John Becker

How Much Does a Website Redesign Cost in 2023?

July 20, 2023
Vin Gaeta Vin Gaeta

Do You Need a New Website? Maybe Not

July 19, 2023
Vin Gaeta Vin Gaeta

14 Award-Winning Website Designs (& What They Did Right)

July 17, 2023
Christine Austin Christine Austin

What a New Self-Selection Tool for Your Website Will Cost

July 13, 2023
John Becker John Becker

9 Self-Service Tools to Inspire Your Business Website

July 10, 2023
John Becker John Becker

What Does a Great Inbound Marketing Website Look Like in 2024?

May 16, 2023
Joe Rinaldi Joe Rinaldi

Your Website Strategy Must Include These 6 Things

March 20, 2023
Mary Brown Mary Brown

Website Conversions in 2023 — STOP, START, KEEP

January 25, 2023
Vin Gaeta Vin Gaeta

Website Mastery: A better redesign process for your business website

November 1, 2022
John Becker John Becker

8 Best Content Management Systems for Digital Marketing in 2023

October 1, 2022
Joe Rinaldi Joe Rinaldi

12 Essential Tips for Improving Your Web Design in 2023

September 13, 2022
Christine Austin Christine Austin

23 of the Best Examples of Business Blog Design

May 30, 2022
Christine Austin Christine Austin

5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)

May 16, 2022
John Becker John Becker

Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful

February 22, 2022
Joe Rinaldi Joe Rinaldi