Skip to the content

Menu

Visual cues help organize information in a clean, concise way and make information stand out. Color is a visual cue everyone has encountered or has used to convey information: It could have been a color-coded answer key with correct answers in green and incorrect answers in red, a map of Europe with European Union (EU) members in blue and non-EU members in yellow, or a color-coded circle chart with a key noting what each color section means. However, using only color to highlight content can lead to a muddled and difficult experience for a person who is color-blind, has low sight, or is blind.

The Case for Alternative Tools to Convey Information

For people who are color-blind—whether red–green, blue–yellow, or complete color blindness—there are situations in which it can be difficult to differentiate between different color combinations. This can mean that assigning a meaning to a specific color, such as colors on a map representing different information, could make it difficult for a color-blind user to visualize the information correctly. Having color as the only visual cue can also cause confusion for low-vision and blind users who use assistive technology, such as screen readers, to read the page. Since the color of the text is not read by a screen reader, using green to denote correct answers and red to denote incorrect answers, for example, will not provide the information needed by a screen-reader user to figure out which answers are correct and which are not.

Imagine how difficult it would be to use a map of the Washington, DC, Metro if you were fully color-blind.

How to Think Beyond Color to Convey Information

Does this mean that we should stop using color in web design? No! Color is a great tool and by no means should we stop using color. What we should focus on is finding redundant ways to convey the same information. Here are additional methods of conveying information that can be combined with color:

  • Color-coded text: Using the previous example of red text used to signify incorrect answers and green text to signify correct answers, instead of only using the text color, add a green checkmark in front of the correct answers and a red “X” in front of the incorrect answers. This way the checkmark or “X” will provide the same information to color-blind or screen-reader users. This can also be true for form fields in which color is used to denote information that is required. In this example, the information should also be conveyed via text that indicates the required fields.
  • Color-coded charts, graphs, and maps: If space allows, add labels to the color-coded areas. If space is limited, add a different pattern to each of the color-coded sections . If a user cannot distinguish the differences in color, the pattern helps the user differentiate the specific chart sections. 

This donut chart from the 2019 Election Assistance Commission Annual Review uses labels and shades of blue to distinguish the sections.

This map from the Federal Emergency Management Agency’s 2019 National Preparedness Report uses patterns and different colors to allow users who are color-blind to associate the states with the information provided in the key.

How Accessible Information Improves User Experience

Using alternative tools for conveying information will create a better user experience and will aid in compliance with Section 508 of the Rehabilitation Act and Web Content Accessibility Guidelines (WCAG) standards. Not only do alternative tools for conveying information provide color-blind, low-vision, and blind users access to all of the information on a page, they can also provide more implicit associations used in text and images and should be taken into consideration whenever color is used to convey information.

Providing accessible experiences is essential for successfully informing and educating all members of the general public. Fors Marsh Group (FMG) has years of experience compliantly designing, developing, and testing within Section 508 of the Rehabilitation Act and relevant electronic and information technology accessibility standards. In addition to testing functionality and availability, FMG’s dedicated compliance specialists systematically assess the applicability of Section 508 requirements on all tasks and deliverables. Contact us to learn more about our 508 Compliance capabilities or to work with one of our compliance experts.

About the author

Brianna Arnold

Brianna Arnold is an accessibility specialist with over six years of experience testing digital content to Section 508 and WCAG 2.0 compliance standards. Previously, she worked with physical accessibility while working as a museum educator and digital accessibility making online courseware accessible for K-12 students. Since joining FMG in 2019, Brianna has worked to ensure compliance to the Section 508 standards for digital content across the organization. 

Get in Touch

Request a meeting. Ask a question. Send an RFP. Inquire about careers. The right person here will reply to your inquiry.

Impact

Submit your email. Receive FMG’s Impact, our monthly publication.

Please enter a valid Email address