Table of Contents
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 certain 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 tools, both online and built into various programs like Photoshop, that can emulate color blindness. For example, if 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.
If your site is not live yet, the Coblis color blindness emulator works on files that 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 important 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 color blind users. If, however, you then used purple as your color for link text, these users may not be able to differentiate links from body text.
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, differentiating red from specific colors like black or green can be problematic for color blind 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 color blind 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 differentiate the colors (and, again, the Coblis emulator can help). Usually, if a chart has five or fewer data sets (colors), selecting a color scheme that is friendly for everyone is simple. If there are eight or more, however, it gets quite difficult.
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 slices where differentiating their colors will pose problems.
Patterns can also be used for bar charts and a variety of other chart types. In the case of 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 color blind users when developing your website. Let us know if you have any other helpful tips in the comments below!