#  Color for Meaning 

 



 ##  

  expand\_more  

 
  

 

Color is a great communication tool. When using color to indicate meaning, it is important to be mindful that your intended meaning is not lost for users who either can’t see the specific colors or who may use assistive technology to read your page aloud.

Adding a secondary cue will ensure that meaning can be understood beyond color alone. Secondary cues could be:

- Text differences
- Shape differences
- Labels

By making the information available in multiple ways, you ensure that all your users have access to the same information.



 

##  Example 1 - Use Text 

In this example, a user has provided their feedback to an email as "see my notes in red." We expand on this, adding a secondary cue (text) that says "see my notes in red and marked with my name."

 

 



 ### Original:

 ![Red text that says "I would consider revising this paragraph.](/sites/g/files/omnuum12446/files/2025-11/Example%20-%20comments%20in%20red.png)

 

Uses **color alone** to indicate meaning.



 

 ### Accessible:

 ![Red text that says "Sarah: I would consider revising this paragraph.](/sites/g/files/omnuum12446/files/2025-10/Example%20-%20comments%20in%20red%20%2B%20name.png)

 

Uses **color and text** to indicate meaning.



 

  

 

 

 

##  Example 2 - Use Shape Differences 

In the example, a red square is used to mark incorrect answers and a green square is used to mark correct answers.

To make it accessible, we add a secondary cue (shape differences) to ensure that meaning can be understood even if our audience can't see red or green.

Note: to ensure these symbols are accessible to users of assistive tech, we would also typically add [alt text](https://accessibility.huit.harvard.edu/describe-content-images) to each symbol, something simple like “red x” and “green check.”

 

 



 ### Original:

Uses **color alone** to indicate meaning.

 ![Text "What is the Capitol of Massachusetts? with answers Cambridge (next to red square) and Boston (next to green square).](/sites/g/files/omnuum12446/files/2025-11/Example%20-%20CFM%20-%20Mass%20-%20Squares%20whitepng.png)

 



 

 ### Accessible:

Uses **color and shape** to indicate meaning.

 ![Text "What is the Capitol of Massachusetts? with answers Cambridge (next to red X) and Boston (next to green check).](/sites/g/files/omnuum12446/files/2025-11/Example%20-%20CFM%20-%20Mass%20-%20X%20and%20Check-whitepng_2.png)

 



 

  

 

 

 

## Example 3 - Use Labels

In this example we have a line graph for Training attendance by Format from 2005 to 2025, with three lines being compared: Asynchronous, Webinar, and In-Person.

The trends show that as In-Person attendance decreased, Webinar attendance increased, and in particular there was a seismic shift for both in 2020. Additionally, we see that Asynchronous training rose gradually over time but not as notably as the other two training formats.



 

### Original:

Uses **color alone** to indicate meaning.

 ![Line graph](/sites/g/files/omnuum12446/files/2025-10/Example%20-%20line%20graph%20-%20no%20labels%20-%202.png)

 



 

### Accessible:

Uses **color and labels** to indicate meaning.

 ![Line graph with labels](/sites/g/files/omnuum12446/files/2025-10/Screenshot%202025-10-29%20102227.png)

 



 

## Testing

- Print out your page in black and white. Does the content, information, and instructions make sense when color isn’t available?
- Read your page to someone who isn’t looking at the screen. Are they able to get all of the necessary information?
- Check your page for references to visual appearance, size, position, or orientation. Is this information provided in a way that's understandable to someone who can't see?

## Resources

- [Understanding WCAG SC 1.3.3—Sensory Characteristics (WAI)](https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html)
- [Understanding WCAG SC 1.4.1—Use of Color (WAI)](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)



 

 

 

 

##  Related Techniques 

 



  [### ✎ Technique: Structuring content

 ](/technique-structuring-content)Adding structure to web content makes it more readable and comprehensible to everyone and especially to people with a visual or cognitive impairment that makes reading on-screen content difficult.



 

 

   [### ✎ Technique: Referring to page content by its position

 ](/technique-referring-controls-position)Avoid referring to a button, menu, or other item in the page **only** by its position on the page; instead, use additional information that describes the content.



 

 

   [### ✎ Technique: Using color to convey information

 ](/technique-colored-pictograms)Color is a powerful visual means of presenting or distinguishing information, but when you use color to identify or distinguish information, make sure that this information is still available to people who can't perceive color.