border_blue and gold.png

What does it mean to convey meaning with color?

Page Content

What does it mean to convey meaning with color?
Why are we doing this?
How to use more than just color to convey meaning
List of 5
Next Steps

In addition to issues with contrast, we want to be careful that we do not use color as the only way to convey information. Just as when we are talking about contrast, there is nothing wrong with using color! What we want to do is make sure that we use mechanisms other than color to provide information.

Using color as a reference

Sometimes we use color to refer to different elements on a page, form, or image. Take the button below as an example. How can we best tell users what to do?

Submit button

Use color only to convey meaning (not good): Click the blue button to submit your work

Use an alternate method to convey meaning (good!): Click the "Submit" button to submit your work

Using color for data

Another common way to convey meaning with color is to use it to represent data. The graph below is one example.

Population projections for major world regions

Image Source: Brookings Global Population Projection

Top of Page

Why are we doing this?

There is no guarantee that everyone will see color in the same way. There are a number of ways our ability to see color can be affected:

Users with visual impairments might not be able to see a full range of colors or be able to distinguish colors that are similar in hue or intensity.
Screen reader users have no access to color information and rely on text-based content for information.
Different devices might not display color in the same way, making yellow and white distinguishable on one, for example, but not on another.
Documents printed from or photocopied on a machine that only creates black and white images eliminates all meaning conveyed using color.
Users who use technology that alters the appearance of their screen might have a hard time reading content or distinguishing meaning.

Top of Page

How to use more than just color to convey meaning

Use of color is not an issue specific to Canvas and there is no easy check to make sure we do not use color to convey meaning. It is simply something to keep in mind when applying color to any object. Here are a few examples of how to add meaning to your content without relying on the use of color.

Example in a table

In the first table, rows highlighted in green represent towns in Tompkins County, NY. In the second table, rows are also highlighted in green but a column has been added to indicate which county each town is in. The extra information makes the information available whether or not the color is present.

Towns in New York State
Town	Founded	Population (2010)
Tonawanda	1836	73,567
Poughkeepsie	1788	43,341
Lockport	1824	20,529
Ithaca	1821	19,930
Dryden	1803	14,435

Towns in New York State
Town	Founded	Population (2010)	County
Tonawanda	1836	73,567	Erie
Poughkeepsie	1788	43,341	Dutchess
Lockport	1824	20,529	Niagara
Ithaca	1821	19,930	Tompkins
Dryden	1803	14,435	Tompkins

Source: List of towns in New York (based on 2010 US population census data)

Example in a graph

When creating graphs, use symbols or line type to convey information (either in addition to or instead of using color). The graph below shows one way to do this.

Projected population growth from 1950 to 2100

Image Source: Population | West Africa - USGS

Learning Tool Example: Kahoot!

Some learning tools do an excellent job of using vibrant colors - along with other visual elements - to convey meaning. Kahoot! is one example. When creating multiple-choice questions, each option is distinguished with both a color and a shape (triangle, diamond, circle, or square). This way, a user can pick and answer whether or not they are able to distinguish a particular color.

Source: Kahoot!

Top of Page

List of 5

Avoid using color only to convey meaning in your content.
It is fine to use color, as long as there is an alternative way to access the information.
There is no easy check (like an accessibility checker) to make sure you are not using color to convey meaning.
Web links are one example where both color and font style (underlining) are used to convey meaning. Make sure your links are underlined!
If you use content from another source that you cannot change (such as an image or chart), provide an alternate method to access the information.

Top of Page

Next Steps

Your Turn

Review the content of your own site (including any scanned documents you may use as resources). Are there charts, graphs, or instructions that use color alone to convey information? Have you seen other examples of where color was used as the only source of information?

Dig Deeper