Introduction
Color is often used to convey meaning in our society. Bright colors might be used to get attention, or as an alert or warning. It's important that those colors aren't the only thing conveying meaning in a digital environment. Many users can't see or differentiate the colors, and assistive technology can't communicate the colors.
Let's think about stop signs for a minute. Stop signs are one of the most important signs on the road. There are three consistent attributes for a stop sign:
- A bright red color
- The word STOP in white
- An octagon shape
The red draws attention, the word stop is in high contrast and tells you what to do, and the shape is unique from other road signs. If you can't read the word "stop," or can't see the color red, you still have other attributes to rely on to help you understand the meaning.
This leads us to two important concepts for color and accessibility: contrast and using color alone.
Requirements in brief
- Color alone is not used to convey information
- Body text has a 4.5:1 contrast ratio with its background
- Large text (18pts+ and bold) has a 3:1 contrast ratio with its background
- Interactive elements such as buttons have a 3:1 contrast ratio
Color contrast
To ensure text and interactive elements are legible and easily found, these items should have certain color contrast ratios. A contrast ratio is determined by the "luminance" of each color. It's not always easy to tell by looking if you've met a contrast ratio, which is why we have a list of colors that work together from Mayflower, and tools to test when you are using other colors.
Text should have at least a 4.5:1 contrast ratio with its background, and interactive elements like buttons or icons should have at least a 3:1 contrast ratio.
The following examples test the contrast of white and black text over the "Bay Blue" color from Mayflower.
This white text over "Bay Blue" is an example of good text contrast. It passes our contrast ratio test at 7.7:1.
This dark "Revolution Gray" text over "Bay Blue" is an example of poor text contrast. It is more difficult to read, and fails the contrast ratio test at 2.4:1.
Avoid using color alone
Color should never be the only thing used to convey meaning. The most common color combination used to mean something is red and green. Ironically, the most common form of colorblindness causes challenges in telling red and green apart — and that is something that affects 1 in 12 men. Low vision and cataracts can also prevent someone from being able to recognize certain colors. This doesn't mean color can't be used, it means we want to ensure that there is an additional indicator to convey meaning.
Make sure whenever you use color, whether it's for alerts, status, data visualizations, or other purposes, that color is supplemental to the content.
Color as an indicator
Let's compare examples where color is used. Following are two examples of a list of applications that a user submitted, with a status column indicating progress of the submission. One incorrectly uses color alone, the other correctly uses color as a supplement.
Fail: Next to the items in the list, a red, yellow, or green circle indicates the status of an application. This pattern uses color alone to indicate this status, so it fails the criteria for using color alone.
Pass: Text indicating the status of each application is present in addition to the colored circles. Color is used as a supplement to the text in this pattern, so it passes the criteria.
Color as an identifier
In the case of a visualization like a map, color is often used to identify categories or areas. Color can still be used in this case, so long as there is an additional way to identify the category without the color.
Following is an example of an (unofficial) map of Massachusetts regions with a color coded legend. The first map uses color alone, the following uses letters as an additional identifier. Letters are not the only way to do this. Shapes, patterns, or arrows connecting the legend to the regions can be used.
Fail: This map uses only color coding to match up each region with the legend. This can be very difficult for users with low vision or colorblindness. This can become more challenging if colors are chosen that don't have high contrast between them.
Pass: The letters A through G over this map identify each region and correspond to the legend, so there is an additional identifier to figure out each region aside from the color.
Data visualization
Data visualization in charts and graphs is a complex subject when it comes to accessibility. Colors are just one consideration when creating an accessible data visualization. Let's compare some techniques to increase chart visibility and comprehension.
Fail: This chart uses color alone to identify the bars, and each color is too close in contrast.
Unhelpful chart colors
This bar chart provides only colors to tell the difference between each group that the 3 bars represent. While the colors chosen are different, blue, green and cranberry red, they are actually of a similar luminance. This means that the contrast between each bar is less than 3:1. If this chart were viewed in grayscale, it would be very difficult to tell which group was which.
OK: This chart uses a dark, medium and light blue. While they are the same color, the difference in contrast is greater.
More helpful: Chart colors
In this chart, all of the bars are blue, but there is a 3:1 contrast between each color. There's also a black outline around each bar to make sure that even the lightest colors will contrast with the background. This is a little better, because it can be perceived by more people with visual impairments, but it is still technically using color alone.
Better: This chart is using different patterns to differentiate the bars.
More helpful: Chart patterns
This chart is now using dotted, striped, and solid patterns to differentiate bars. These dots and stripes could be any color, and because they are different patterns the color is not the only thing conveying meaning. This can be useful for small data sets, however, with large data sets, using patterns can get visually overwhelming and distracting.
Best: This chart has labels that are aligned with each bar.
Most helpful: Chart labels
This chart not only has colors that contrast with each other and with the background, but also the labels have been moved to be aligned with each bar. Even if these bars were all the same color, a viewer can tell the difference by the labels on the chart. In large data sets where a legend can get very long, labels on the chart will be key.
These examples only demonstrate helpful techniques for limited data sets, and also only focus on chart visuals. There are additional factors to consider to making your charts accessible not just visibly, but for assistive technology users as well.
Learn more about accessibility and data visualization (Link coming soon)