A Beginner's Guide to Authoring Universally Accessible Materials, Part 4: Color
This guest post is by Celine Greene, Senior Instructional Technologist in the Center for Teaching and Learning.
Continuing our orientation towards creating accessible documents, I want to focus today's post on color and contrast. In a nutshell, the two things to keep in mind are (1) we should never* rely on color alone to make an object "stand out" or otherwise communicate something visually; and (2) when objects are overlapping and need to be distinguished from one another - be it elements in a chart, or text over an image or solid color background – there should be a sufficient contrast ratio in the luminosity, or brightness, of the non-decorative objects' specific colors.
In making our resources accessible, we reach the greatest number of individuals by making our materials perceivable (available), understandable, and robust (translated across technologies). This includes authoring resources that can be discerned both visually and programmatically. If you are going to use color to give an object meaning, use something in addition to color to make certain that it can be understood by people with limited color vision and by those individuals relying on alternate, or transformed, versions of your original materials. Transformed versions of your original resource may be required by people using text-only communications; high/low contrast, grayscale or monochrome displays; or various assistive technologies. Additionally, when you use color to convey information, implement it so its use is predictable and consistent within a single resource (e.g., choose a single color for a specific heading level Style of a Word document, the hyperlinks on a web page, or annotations in a presentation’s equations).
A shortcut to thinking about effective use of color and contrast ratios is to consider that the same information should, when feasible, be communicated in a grayscale or black and white version of the resource. But, to be certain, there are tools and best practices to make sure you’re in compliance.
Tools for checking for acceptable contrast ratios
According to the Web Content Accessibility Guidelines Version 2.1, Level AA contrast ratio success criteria (WCAG 2.1 AA, which Johns Hopkins uses for our accessibility metric), the colors of text against a background should have a contrast ratio (bright to dark) of at least 4.5 to 1. Graphical, non-text elements that are adjacent or overlapping should have a ratio of at least 3 to 1. Here are two tools that will help you determine compliance:
- WebAIM (Web Accessibility in Mind) provides a contrast checker that allows you to enter hexadecimal or RGB values of the colors you are checking for compliance. It also has a convenient color picking tool. The results specify if the color combination passes for “large” or “normal” text on a solid background, as well as if it passes for graphics.
- The friendly contrast checking tool provided by Acart Communications Inc. has an easy, logical URL to remember: https://contrastchecker.com/. Like WebAIM, the site allows you to check using hexadecimal or RGB color values or by using a color picking tool. An extra benefit to using this site is that an image (which could be created from a screen capture) can be uploaded and its colors be automatically determined before checking for compliance.
A Note on Background Colors and Images
When you create a document, presentation, or website be mindful of the color contrast ratio between the default text and its background. This includes a slide’s background color or fill and the often-overlooked contrast within a table: the text of a table’s cell and the cell’s “fill” color.
Best Practices to Not Rely on Color Alone
Colorful imagery and styles can make a document exciting or beautiful, and are a common way to distinguish something (e.g., “due dates are shown in red”). But when the colors convey important information, understand that not everyone will have the same experience; you must use something other than color to make your point. Here are some tips to make your communications better in this regard:
- Text that is emphasized or distinguished by using a different color font should also have another style element to separate it, such as being bold and/or italicized.
- A map where different territories are distinguished by color should have clearly defined borders, or sufficient contrast ratios among every adjacent region and/or border. Another option is to distinguish the adjacent regions with varied fill patterns in addition to different colors.
- Any object where there can be a legend for an original data series (a bar chart, line chart, etc.) should use something in addition to color – such as different fill patterns, line patterns, or different shaped line markers – when formatting the series. If you aren’t differentiating the look of the data series using something other than color, you must use labels within the data display.
- Any data visualization that can’t be edited directly (due to copyright or complexity) should be properly cited, including the original source’s Digital Object Identifier if one exists. The original source will hopefully provide the pertinent details, but you should still provide a text summary of the display.
- If you don’t have a practical way to distinguish or differentiate objects using something other than color, provide a text summary of the object(s) in order to communicate contextually relevant information. Ideally, this text would appear near the object.
* Exceptions to the Color and Contrast Success Criteria
There are a few exceptions to meeting the color and contrast ratio success criteria set forth by WCAG. These are as follows: (1) when an object’s color and contrast is not used to communicate anything, such as in a decorative graphic; (2) when the same information is also communicated through visible text; and (3) when the original, “non-compliant” presentation of the object is essential, such as in photograph or within a heat map using gradients of colors that don’t have the recommended contrast ratio.
If you want to learn more about the importance of color and contrast ratio compliance, please visit WCAG’s full explanation of its distinguishable guideline, paying specific attention to criterion 1.4.1 Use of Color, 1.4.3 Contrast (Minimum), and 1.4.11 Non-text Contrast or WebAIM’s page on Contrast and Color Accessibility.
Return to Part 3 in this series to learn about alt text, or proceed to learn about meaningful hyperlinks in Part 5.