Building a More Accessible OIT: Colors and Images

Editor’s Note: This article is the second in our four-part series, Building a More Accessible OIT, which explores how we can all make OIT more accessible to colleagues and customers with disabilities. In Part 1, we introduced digital accessibility and how it relates to 508 compliance and Web Content Accessibility Guidelines. 

Color and images are quintessential aspects of data visualizations, web design, presentations, and more. How colors and images are used in a graphic can exert significant influence over how we consume and interpret information. 

However, people with certain disabilities may have difficulty visually perceiving color and images. In Part 2 of our series, we illustrate how to create accessible color and images using Web Content Accessibility Guidelines (WCAG). Applying WCAG practices to visual elements such as charts, graphs, and photos improves the clarity of your content and provides an inclusive experience for your entire audience.

Accessibility in Color

A critical aspect of visual accessibility is for colors to have sufficient contrast. The TPGi color contrast checker and WebAIM contrast checker are the tools most commonly used to assess whether color contrast meets the WCAG threshold. These tools calculate a ratio for each color code, a numeric value that compares the contrast of the foreground (e.g., the text) with that of the background. WCAG requires color contrast to be at least 4.5:1 for regular-sized text and 3:1 for large text, including text within an image. Large text is defined as 18-point font or larger or 14-point when bolded.

While color contrast is important, WCAG notes that it shouldn’t be the only means of conveying information. Charts, graphs, and maps often rely too heavily on color, which may not be perceptible to people who are color blind or have low vision. Applying patterns, shapes, labels, and legends in addition to color can help your customers with visual disabilities distinguish between different types of data. 

A Picture of Accessibility

Images and graphics – such as memes, photos, and GIFs – that illustrate or explain content need to be accompanied by a text equivalent to become accessible. Captions and alternative text (alt text) are two types of text equivalents that describe visual content. Captions are usually longer and included above or below a figure. Alt text is shorter and embedded within an image. 

Follow these guidelines to create accessible images and graphics:

• Describe information important to understanding the context of an image, such as its purpose and any text, emotions, or actions. Omit information not pertinent to the image.
•  
  • For example, the alt text for a photo of an American flag blowing in the wind might read, “An American flag blowing in the wind.” The alt text may not mention the cars passing by in the background, depending on whether the cars are relevant to the context of the image. 
• Limit captions and alt text to 140 characters or less when possible.
• Don’t include large amounts of text within an image. This requires long paragraphs of alt text and prevents screen reader users from navigating paragraphs at their own pace. 
• Avoid writing "image of" or "graphic of" within alt text (e.g., “image of an American flag”). Most screen readers announce an image before reading the embedded text.
• Avoid writing alt text or captions for images that are already described in the body text.

A Note about GIFs

GIFs often feature automatic blinking, flashing, or strobing content that can cause seizures in people with photosensitive epilepsy. To create accessible GIFs:

• Ensure GIFs can be paused, stopped, or hidden and don’t play automatically. 
• Avoid GIFs that flash more than three times per second.
• Include captions, alt text, or audio descriptions.

Practice your alt text and captioning skills by accessing these features in Google Docs, Microsoft Word, PowerPoint, Slack, and other commonly used applications. For easy reference, download our checklist to help you create accessible color and images.

In Part 3 of this series, we'll learn how to make virtual meetings and webinars more accessible to colleagues and customers with disabilities.