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!
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.
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
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
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
First, go to the color wheel section and select the color scheme you would like to work with.
Click on accessibility tools and from the tools section click on the colorblind safe
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
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**
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/
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