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
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.
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.
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.
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.
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.
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.
For bar charts and pie charts, I recommend applying patterns same as the bar chart below.
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
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:
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.
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.
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.
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.
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.
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
