Color blindness doesn’t mean that people see the world in black and white. More than 99% of all colorblind people do see color.
Also, it is best to refer to this issue using the term “color vision deficiency” (CVD). When comparing the term colorblind to the term CVD, CVD is more accurate.
According to color-blindness.com, about 0.5% of women (1 in 200) and 8% of men (1 in 12) suffer from some form of CVD.
This article will provide advice on things to consider when designing your website and content for your website to support and include people who are affected by CVD.
Are you considering users with color blindness?
There are several variations of CVD. These are:
Deuteranopia and Protanopia
Unable to tell the difference between red and green
Tritanopia
Difficult to tell the difference between blue and green, purple and red, and yellow and pink. It also makes colors look less bright.
Monochromacy
These individuals cannot see colors.
Note that only about 0.00003% of the world’s population suffers from total color blindness.
The Challenge
The challenge of designing for color blindness is that it is hard to determine what colorblind users see and how it differs from what the average user sees.
And the difference between the different types of color blindness adds a layer of complexity.
Color blindness impacts a significant number of web users. Yet, many websites still rely on colors to differentiate or bring attention to specific content. Critical information on your website should not rely on typical color schemes to be fully understood. Websites that don’t follow this rule are alienating users with color blindness and possibly many others.
Identifying and solving accessibility problems related to color blindness can be tricky for a variety of reasons. One big reason is that issues pop up in many places on most sites, making them hard to identify and resolve.
Text versus Background
The first and most crucial consideration for accommodating users with color blindness is to look at your pages’ primary background color versus the foreground (or text) color. For example, using red text on a black background could render your site unreadable by users with certain types of color blindness.
There are many online tools and tools built into various programs like Photoshop to emulate color blindness. For example, suppose your site is already live. You can use the Toptal Color Filter to view it as it would appear to users with different color blindness variants.
It is easy to use this tool. Just type in your URL and the tool will show how an individual with normal vision views the page and how an individual with CVD views the page. Below is a side-by-side comparison of the top of the home page of this website.
Another online tools is UserWay’s Accessiblity Tool that emulates colorblindness. You simply paste in your URL and the tool analyzes your website page and show you how to improve the page.
Another online tool is the Coblis Color Blindness Emulator works on files you upload, including your screenshots. You can also input your hex codes on UserWay’s Contrast Checker to see if the ratios are accessible.
Addressing Link Text
It’s essential to choose the correct color for link text. Links are among the most fundamental and most used interactive elements on any site, so it’s important that users with color blindness can differentiate them from body text. For example, dark blue text against a white or light grey background would be a color scheme that is friendly to colorblind users. If, however, you then used purple as your color for link text, these users may not differentiate links from body text.
There are many other problematic color combinations. Here, again, the Toptal and Coblis color blindness emulators can help you select a color scheme that works for everyone.
Hidden Traps
Some problematic situations for users with color blindness may not be simple to identify. For example, when filling out online forms, it’s common for error messages to appear when a user skips a required field, formats data incorrectly, and similar actions.
Frequently, red is used as a warning color to differentiate such error messages from body text. Unfortunately, determining red from specific colors like black or green can be problematic for colorblind users. Providing a warning icon or other symbols before or after error messages can help them to stand out.
Color Blindness In Infographics
As the web continues to mature, infographics are used more frequently instead of long text blocks. Although infographics can be a terrific tool for communication, the efficacy of that communication can break down for colorblind users if colors are carelessly selected.
For example, most pie charts and line charts rely solely on color to differentiate the different data series from each other. These colors need to be chosen with care to ensure that everyone can distinguish the colors (and, again, the Coblis emulator can help). Usually, if a chart has five or fewer data sets (colors), selecting a friendly color scheme for everyone is simple. If there are eight or more, however, it gets quite tricky.
In such cases, graphic artists may need to resort to adding patterns to the slices or lines. For example, a light checkerboard pattern for one piece versus a stippled or dotted pattern for another, especially for portions where differentiating their colors will pose problems.
Patterns can also be used for bar charts and a variety of other chart types. In line charts, different styles of lines can be used to represent different data series such as double, dotted, dashed, etc. You will often see this solution on subway maps, for example.
Don’t forget to consider colorblind users when developing your website.
Summary
Some will argue the need to design a website with such a small population in mind. After all, colorblind people are a small minority. The are several reasons:
1) A website should always strive to be user-friendly for all audiences. Inclusion is proper for an advanced society.
2) There are standards that keep sites accountable to people with disabilities. This is what Section 508 Compliance is all about.
3) A well-designed website that considered people who have CVD does not need to be modified to make content accessible to people with CVD. Design your website from the start to be accessible.