Color Guidelines for Digital Accessibility
Color is a great way to enhance the look and feel of digital content. The use of color alone to convey meaning creates problems for people with low vision, color perception deficiencies and color blindness. Using color with accessibility guidelines in mind is an easy and effective way to create digital content that is both appealing and accessible to all.
Always convey information in a way that does not rely solely on color . For instance, stating in a form that, "required fields are in red" poses a problem to screen reader and color blind users. They will not be able to see which fields are required. Adding an asterisk to those same form fields and updating the notation to read, "required fields have an asterisk" helps not only screen reader and color blind users, but all users. This same rule applies to information within graphs, charts, infographics and other images. For instance, if you were to share the following graph about screen reader software choices, do not use the statement, "NVDA users are listed in blue, JAWS users in orange and VoiceOver users in purple." Instead, convey the information within the text or have an alternative method of conveying the same information, like an accessible data table.
Another great way to show information in charts and graphs is to use textures or patterns. The graph below shows preferences of different types of fruit. Each fruit has its own patterned line. This helps users with different types of shade color blindness easily differentiate the data. It also helps to add space between the bars in charts and graphs or have the bars outlined in a darker color to separate the data. (example of outlines in the "Designing for Color Blindness" section)
Color contrast is the difference in light between font (or anything in the foreground) and its background. In digital accessibility, how well one color stands out from another color determines whether or not most people will be able to read the information. The Web Content Accessibility Guidelines state that, "the visual representation of text and images of text has a contrast ratio of at least 4.5:1 expect for the following: Large Text (with at least 18 point or 14 point bold), Incidental (text or images of text that are pure decoration or are part of a picture that contains significant other visual content), and Logotypes (text that is part of a logo or brand name)." To check contrast ratios, you will need to know the hex color codes of the colors being used and enter them into the WebAIM Color Contrast Checker.
Another good example of why color contrast and design choices matter is color blindness. Color blindness is a spectrum. Red/green color blindness is the most common form of color blindness. In the image below you can see a red and green colored graph where the green equates to 25% and red is 75%. The first graph does not have defining lines between the sections. When the graph is converted to greyscale there is no way to differentiate the sections. The second graph does have defining lines between the sections and when converted to greyscale a user who is colorblind is still able to tell which section is which. Another way to define the data would be use of texture or patterns as mentioned in the "Use of Color" section above.
A common question that arises around designing with color blindness in mind is, "are there specific colors to avoid?" Without knowing which color blindness you are designing for, it is very hard to avoid specific colors. One assumption would be never use red and green together, but there are proper ways red and green can be used together. There are several resources available that simulate the different types of color blindness, offer "safe" color palettes and share research about designing with color blindness in mind.
Additional Resources on Designing with Color Blindness in mind:
Recommended training from BuckeyeLearn:
- Accessibility Fundamentals: Designing an Accessible User Experience
- Web Accessibility: Visual Design and Colors (Accessibility Fundamentals:Designing an Accessible User Experience is a pre-requisite for this training)
Quick Guide for Color
- Text and interactive elements should have a color contrast ratio of at least 4.5:1. WebAIM Color Contrast Checker
- Color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
- Use patterns or dark outlines of color sections in charts and graphs.
- Consider using a Color Blindness Color Palette.