5 ways to design for people who are colorblind
Color vision deficiency (CVD) :
Color vision deficiency (CVD) affects around 1 in 12 men and 1 in 200 women worldwide; for every 100 users visiting your website or app, up to 8 people could suffer from CVD.
Red-green color blindness is the most common deficiency, affecting approximately 1 in 12 men (8%) and 1 in 200 women (0.5%).
Imagine submitting an online form and receiving an error message, “There was a problem with your submission. Please correct it.” You scroll down the page but nothing indicates the cause of the problem.
This is a scenario that users with color blindness experience every day since they cannot differentiate the fields highlighted in red.
Types of color blindness :
- Protanopia: reduced sensitivity to red light.
- Deuteranopia: most common type of color blindness. Individuals have difficulty seeing green light.
- Tritanopia: extremely rare. Individuals have difficulty distinguishing between blue and yellow colors.
Designing for the colorblind :
Not being able to differentiate between two colors and not being able to glide through interfaces are two different things. A good design is inclusive and works for everyone in every situation.
#1. Utilizing colors and symbols
Relying solely on color to communicate errors or convey information through your UI is a bad idea.
According to the World Wide Web Consortium (W3C), one of the accessibility guidelines for designing for users with color blindness mentions that :
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
This problem can be tackled using icons and symbols; informing the user that they have made an error. Such a tiny tweak accelerates inclusive design.
#2. Avoiding certain color combinations
Color combinations having a lower contrast ratio or difficulty in distinguishing them must be avoided. Below is a list of color combinations to avoid while designing interfaces :
- green-brown
- green-blue
- green-red
- green-black
- green-grey
- blue-purple
- blue-grey
- light green-yellow
A user with protanopia would perceive the green-red color combination as :
A similar case, the blue-purple color combination, would be seen as :
#3. Getting the contrast right
Contrast is the difference in color that makes an object distinguishable from those in close proximity to each other. The greater the contrast ratio, the better the readability for people with low vision impairments. As per the W3C :
The visual presentation of text and images of text meets a certain contrast ratio of atleast 4:5:1
Listed below are some of the contrast checkers available online:
#4. Work on the primary button
Making the primary button stand out is definitely a good idea but using sometimes it can be difficult for color blind users to perceive.
Following tweaks cater for the inclusive design we are aiming for :
- Trying out different placement combinations of the primary button
- Increasing the size of the primary button
- Increasing the contrast between primary and secondary buttons
- Using icons, borders or even font weight to distinguish primary and secondary buttons.
Firebox using different placements for primary (bottom-right) and secondary (top-left) buttons.
#5. Using textures, patterns & text labels
When dealing with data visualizations, color differences are of utmost significance. Few tweaks that can be done in making accessible visualizations are as follows:
- Adding text labels to segments for easier understanding
- Using textures and patterns to distinguish different segments.
The above chart can be redesigned in various ways to create an inclusive design. Adding white white borders between each segments helps in defining each category. Furthermore, adding text labels to the pie chart also helps in distinguishing the categories. One could also use patterns to convey the same.
#6. Bonus
You can simulate color blindness in Photoshop too :
- First, convert the PSD document to RGB color mode
- Select View > Proof Setup > Color Blindness, then select either Deuteranopia-type or Protanopia-type.
Summary:
- Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
- The greater the contrast ratio, the better the readability for people with low vision impairments.
- The visual presentation of text and images of text meets a certain contrast ratio of at least 4:5:1
- Using textures, patterns or text labels when dealing with data visualizations.
- Make use of the online contrast analyser.
Thank you for your attention, you made it till the end.
