10 Essential Guidelines for Colorblind Friendly Design - UI/UX/Website/Data

Color is incredibly important in all aspects of design. But what if your audience is color blind? Learn how you can design effective, accessible, and appealing user interfaces for colorblind users?


Why Colorblind Friendly Design Is Important?

The term "color blindness" refers to a condition where individuals often mistake shades or lose their ability to distinguish colors at all. 1 in 12 men (8%) and 1 in 200 women are colorblind.


There are more than 350 million colorblind people in the world. This number increases yearly according to the world's population growth (1.05%).


For every 100 users of your website or app, up to 8 of them might really interact with the content in a way totally different from what you might have planned!

Colorblind-Friendly Design - UI/UX/Website

When it comes to advertising campaigns that your client pays for per click, designing a colorblind friendly website and app will enhance the user experience, affects purchasing decisions, and impact the conversion rate.



10 Essential Guidelines for Colorblind Friendly Design


1. Learn About Different Types of Color Blindness

There are seven official diagnoses of color blindness. Four different types of color blindness fall in the red-green category, and two different types of color blindness fall in the blue-yellow category.


Red-green

Red-green color blindness is the most common form.

People with both red and green deficiencies live in a world of murky greens where blues and yellows stand out.

  • Browns, oranges, shades of red, and green are easily confused.

  • Both types will confuse some blues with some purples and both types will struggle to identify pale shades of most colors.

colorblind -friendly design
Different form of red-green color blindness

1. Protanopia

People with protanopia are unable to perceive any ‘red’ light.

Protanopes are more likely to confuse:

  • Black with many shades of red

  • Dark brown with dark green, dark orange, and dark red

  • Some blues with purples, and dark pinks

  • Mid-greens with some oranges

2. Protanomaly

Individuals have red cones and can usually see some shades of red.


3. Deuteranopia

Individuals have no green cones, and they are unable to perceive ‘green’ light

Deuteranopes are more likely to confuse:-

  • Mid-reds with mid-greens

  • Blue-greens with grey and mid-pinks

  • Bright greens with yellows

  • Pale pinks with light grey

  • Mid-reds with mid-brown

  • Light blues with lilac


4. Deuteranomaly

Individuals have green cones and can usually see some shades of green.


Blue-yellow


5. Tritanopia

Unable to perceive ‘blue’ light


6. Tritanomaly

Individuals have blue cones and they can usually see some shades of blue.


Monochromacy

7. Achromatopsia

Achromatopsia or total color blindness occurs in only one in every 33,000 people. People with monochromacy see no color at all. For these individuals, the world exists in black and white, much like old-time television.

 

2. How To Create Colorblind Friendly Palettes Online

Instead of limiting colors in your projects, I will teach you how to make any color palette, colorblind friendly, click on the link below to start.


A) USE ADOBE COLORS

Click Here


  • First, go to the color wheel section and select the color scheme you would like to work with.

How To Create Colorblind-Friendly Palettes Online

  • Click on accessibility tools and from the tools section click on the colorblind safe

How To Create Colorblind-Friendly Palettes Online

  • At the bottom of the page (colorblind simulator), you can see how different types of colorblind people would see the colors in your selected color palette

How To Create Colorblind-Friendly Palettes Online
  • Adjust colors if two colors appear the same for colorblind people.

Colorblind people can easily distinguish a color palette of green, blue, yellow, and red. “Blue is the safest hue.”

For red-green colorblindness: just make sure one of red and green is a lot darker than the other



B) USE COOLORS

You don't have to do it alone because other people have previously gone through this process and discovered color combinations that are effective for the majority of colorblind people.

You can look up these combos online and use the ones you like the best. Coolors website can assist you in choosing a color scheme that is suitable for colorblind people.


**The Color Blindness feature allows you to have a hint of how color blind people will see your palette**


create Colorblind-Friendly Palettes Online

 

3. Avoid Bad Color Combos

For your color blind users or website visitors, you should avoid the following color combinations:


A) green with red /

The most common form of color blindness is the red-green type. People with protanopia are unable to perceive any ‘red’ light, and People with Deuteranopia have no green cones and cannot perceive ‘green’ light.


If you use red and green colors in your designs or for the purchase button some users would have trouble reading it and probably will miss it.


If you must use red and green together, leverage light vs. dark


B) green with blue /

For the red-green type, light green looks like yellow and dark green can be seen as brown. Blue-green or turquoise is seen as gray.


C) green with brown /

For individuals who have red-green colorb lindness, the dark green color is seen as brown, and the light brown can be similar to the green color. So colorblind users can't differentiate between the two colors apart.


D) turquoise with grey /

A red-green colorblind individual might not be able to perceive the green color in turquoise and see it as gray.


E) light blue with grey /

Depending on the shade of gray color and blue colors its better to avoid this color combinaion.


F) light green-yellow /

Light green is seen as yellow to some red-green colorblind people and this color combination would be seen as yellow only.


G) blue-purple /

people with Protanopia are not able to see purple color and it is seen as dark blue.


 

4. Contrasting Colors And Hues

It's better to use high contrast:

All types of colorblind people can perceive differences, in contrast, hue, saturation, and brightness very well.

According to 99design Color blind people can still perceive contrast, as well as differences in hue, saturation and brightness. Use these to your advantage (Hint: many color blind individuals report being able to better distinguish between bright colors rather than dim ones, which tend to blur into one another).


For example, blue/orange is a common colorblind friendly palette. Blue/red or blue/brown would also work (for most colorblind people blue would generally look blue).


Test the contrast of your design with the contrast ratio website: https://contrast-ratio.com/


In the end, to make sure your design is colorblind friendly print it out in black and white or grayscale. If your document is easy to read then it would be fine for colorblind people.


 

5. Text Readability

To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background color and text size as follows:

“WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).”

Here are a few examples of color and size combinations that do and do not pass:

This illustrates how contrast is based on the combination of color and size.

Test the contrast of your design with the contrast ratio website: https://contrast-ratio.com/

 Text Readability for colorblind people - colors to avoide in designing for colorblind users

Colour Contrast Analyser (CCA)

Free color contrast checker tool that allows you to easily determine the contrast ratio of two colors simply using an eyedrop tool.

You can set up this program on Windows, and macOS. You can use the color picker to select a color and verify the contrast ratio. Click here


 

6. Colorblind Friendly E-Commerce Websites

There are two important sections on any e-commerce website that would impact your colorblind users' experiences.


A) The Best Color For “Add To Cart” Button


Red is the most popular button color among the reviewed websites and green color is in second place.


According to convertize: Blue is the third most common color used for an “Add To Cart” button. However, among B2B websites and communications agencies, it is by far the most popular

The Best Color For “Add To Cart” Button - colorblind-friendly e-commorce design

According to the psychology of colors:

  • Red attracts the most attention

  • Green symbolizes harmony and peace

  • Blue is often seen as a sign of trust.


For most colorblind people blue would generally look blue and it's their favorite color. Red is in second place so it would work as well.

If you have luxury products you can use black color to have a better conversion rate.

top colorblind-friendly colors


B) Use Text Labels Instead Of Only Color

Color filters without labels are useless for colorblind users. Purple looks like blue, pink seen as gray, dark red or green seen as brown, etc.


E-commerce websites can use descriptive text beside the color or when the user hovers. It will significantly increase accessibility for color blind users.



 

7. Use Color & Underline To Identify Links

Without the use of color, links should be simple to identify. We frequently utilize font weight or color to indicate links.


The links with icons are easier to see. For those without, it would be a good idea to add an underline. This makes it easy to immediately tell regular text and anchor text apart.


A color, such as dark blue or purple, would be preferable for the link.

Colorblind Guide.


 

8. Colorblind Friendly Data Visualizations (charts, sheets, bars,..)

The various data series in the graphic below can probably be distinguished if you don't have color blindness.

Colorblind-Friendly Data Visualizations (charts, sheets, bars,..)

But...

From a typical box of 24 pencil crayons, most people with a moderate type of red/green color blindness will only be able to accurately identify 5 or so colored pencils.


I used the colorblind simulator to simulate how people with deuteranopia color blindness would perceive this image.

Colorblind-Friendly Data Visualizations (charts, sheets, bars,..)

As you can see, many colorblind people will find this chart to be entirely incomprehensible because it is difficult or impossible to tell which colors are used for which data series.


A) Use Different Shapes & Patterns To Create Colorblind Friendly Data Visualization

To ensure that colorblind persons will be able to understand your plot fully, we recommend utilizing alternative forms, patterns, textures, or labels in addition to a colorblind friendly palette.

Colorblind-Friendly Data Visualizations (charts, sheets, bars,..)

B) Online Resources for Colorblind Friendly Combos

As I mentioned before you can use adobe color and colors websites to create colorblind friendly palettes with ease and then use those colors to present your data.

Colorblind-Friendly Data Visualizations (charts, sheets, bars,..)


For bar charts and pie charts, I recommend applying patterns same as the bar chart below.

Use Different Shapes & Patterns To Create Colorblind-Friendly Data Visualization

Consider adding labels to the data series if, for some reason, you are unable to utilize alternative shapes, patterns, or textures in your plot (provided that you have enough space for that). Making sure that everyone can understand the data you are graphing is of utmost importance.


C) Different line widths and dashes

Colorblind-Friendly Data Visualizations (charts, sheets, bars,..)

D) Use ticker lines

Some mildly color blind people are able to see a color, but only if there’s a sufficient “mass” of it. If a line of color is too thin, it won’t show up as the right color.


E) Direct Label

Try to eliminate all color keys because they are difficult for colorblind folks to understand. Instead, use the following labels for chart formats like line, area, and pie charts:

Colorblind-Friendly Data Visualizations (charts, sheets, bars,..)

Colorblind-Friendly Data Visualizations (charts, sheets, bars,..)
 

9. Use Colorblind Friendly Tools To Test Your Project

Whocanuse.com?

It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

The Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more accessible. Just a tiny part of making the web more accessible is accommodating for those with a form of blindness or low vision.

https://whocanuse.com/


Photoshop

A built-in feature of Adobe Photoshop enables you to view the canvas through the eyes of a colorblind person.

Click View Proof Setup Color Blindness Protanopia-type/Color Blindness — Deuteranopia-type to use it. Now, you can toggle it on and off simply using the Ctrl+Y key on a PC or the ⌘+Y key on a Mac.

colorblind mode in photoshop

Sim Daltonism for Mac

A Mac application called Sim Daltonism can simulate various forms of colorblindness. This tool made a window that you can drag about on top of your screen, making it simpler to screenshot than Oracle.

https://michelf.ca/



Toptal - Colorblind Web Page Filter

This online tool allows you to test your website and displays how your pages will appear to users with different types of color blindness.

www.toptal.com

 Colorblind Web Page tool Filter


Online Colorblind Simulator for Images

You can also use an online color blindness simulator like THIS to check how your plot may look like to other people.

new colorblind simulator

10. Ask A Colorblind Expert To Check Your Project

Talk with an expert from COLORWILL organization.

If you want to make sure your project is colorblind friendly it's better to do it through COLORWILL.


They will check your project according to colorblind people's needs. At first, they will go through your project and will address crucial changes according to the standards such as color palette, readability, icons, forms, etc. And then they will ask people with different types of color blindness to test your projects and finalize it.


COLORWILL can make your charts, graphs, and other data visualization colorblind-friendly. for more information contact info@colorwill.org





Read More & Learn More

IMG_6591.jpg
  • YouTube
  • Facebook

Amir Kosari is a colorblind architect and designer with more than 15 years of experience.

He is the creator of the world's first online training programs for colorblind people. These training programs helped thousands of colorblind people (children, adults, designers) who used to struggle with colors. 

If you have any questions related to color blindness or our programs, schedule a FREE call with us, or send a message using the contact form.

GET TIPS & TRICKS

FOR LIFE

Join our mailing list

Thanks for submitting!

twitter colorblind guide .png
instagram colorblindguide.com.png
colorblidnguide facbook age.png
colorblidnguide youtube.png