Colors can be a useful tool to convey complexity and differentiate content. In many cases, color can enhance the readability and organization of data. However, it’s important to ensure that those with blindness, low vision, color blindness, dyslexia, or other cognitive or visual disabilities can perceive this complexity as well. At the bottom of this article, there is a checklist for how to improve color accessibility of your materials.
Contrast
Contrast is a measure of the difference in brightness, also known as luminance, between two colors. This difference is expressed as a ratio from 1:1 (e.g. white on white) to 21:1 (e.g. black on white). The figure below shows a variety of ratios from low to high contrast.
When colors have insufficient contrast they can be difficult to read for students with cognitive or visual disabilities, or those who are fatigued or have eye strain from staring at a screen, which often emits blue light. The figure below shows what a low contrast color combination may look like to those with different types of color blindness.
The Web Content Accessibility Guidelines (WCAG) is a document that explains how to make web content more accessible. It contains minimum contrast suggestions for different types of text in two categories. The first category, known as AA, is the general guideline for all people including those with mild to moderate visual disabilities. Most color pairings that do not meet AA contrast requirements are difficult to read even for those with good vision. The second category, known as AAA, details higher contrast requirements that will make content accessible for those with severe vision disabilities. Following AAA guidelines, when possible, will allow you to create content that is accessible for the largest number of people.
The various requirements are detailed in the figure below and differentiates different text styles that are often used in documents. Normal text is often any text in the body of a document, while large text might be a title or bolded text. Graphical components include icons, the content of graphs or figures, a bounding box around a piece of text, and any other graphical item that conveys information.
Graphical objects and components might include multiple colors next to each other such as multiple lines on a graph. In this case it is important to consider the contrast between items that are next to each other in addition to the contrast to the background color. Similarly, text might have multiple contrast ratios if it is on top of an image or a gradient background. We would recommend avoiding this whenever possible as it can make text unnecessarily difficult to read.
Color contrast checkers such as this contrast checker by webAIM can help you test the contrast of your chosen colors and adjust them until they meet accessibility standards. When checking contrast, remember that the opacity (also known as the transparency or alpha) of the colors will affect the contrast.
Additional Signifiers
Consider what the use of color is doing in your content; maybe it is highlighting an important phrase, denoting a deliverable, or drawing attention to an error message. What other signifiers--such as text styles, bounding boxes, icons, and shapes--can you add to convey this meaning? The figure below shows some examples of ways to add additional signifiers.
When considering where additional signifiers might be necessary, it can be helpful to view your content using a screen reader or a color blindness simulation. Using these technologies, consider; what information or context is missing?
Low vision, color blind, and dyslexic users often benefit from additional shapes or text styles but this is not enough for individuals using a screen reader. For these individuals, using headings and other textual signifiers is vital. As such, a combination of visual and textual signifiers is often the most accessible option. The figure below shows a variety of options for denoting a homework task and for whom each option would be accessible.
Accessible Color Checklist/Best Practices
Where available, run an accessibility check on your document.
- In Word, go to Review and Check Accessibility.
In PowerPoint, go to File, Info, Check for Issues pulldown, Check Accessibility.
Check any color usage of your documents with a Contrast checker by webAIM to ensure that you meet AAA guidelines for color contrast and opacity.
- Highlight the colored parts of your document and go to the text color box and click on it
- Go to Home, Font, More Colors, then the Custom tab
Copy the Hex code and paste it into the Contrast Checker
Include additional signifiers in your document to imbue additional meaning and denote important information. Additional signifiers can be icons or shapes that are readily available through Word or Google.
Include an explanation or key for how to decode additional signifiers where appropriate or unclear
All non-decorative colors have at least WCAG AA contrast between the foreground and background.
Color signifiers (e.g. a red color used to signify an error) are paired with an additional signifier such as a bounding box, icon, or text style.
If using color to differentiate content type (e.g. a hint inside a body of text), add appropriate titles, labels, or headers.
Text and graphics are placed on a solid colored background.
Colors that are next to each other (e.g. lines on a graph) have as much contrast as possible between each other and the background.
If AA contrast is not possible (e.g. a graph with dozens of lines), include additional text and signifiers to convey information. This may include adding captions and text boxes to describe trends visible through color in graphical components.