Support Centre

Convey meaning without relying on color

Renée Meloche
Renée Meloche
  • Updated

Color is only one of many visual tools that can be used to convey information and guide readers through a document. Web Content Accessibility Guidelines define an accessible document or webpage in part by its use of color.

How does color affect document accessibility?

Readers who are color blind, visually impaired or use accessibility tools like screen readers require more than color cues to understand content. Screen readers do not indicate color, so if color is the only cue used to indicate meaning, a screen reader will miss it.

For example, take this list:

A bulleted list on a light blue background, with five items: Document title, Color contrast ratios, Document language, Alt text and Images of text. The items 'Document title' and 'Images of text' appear in a red font. The rest of the items appear in a blue font.

The first and last items, "Document title" and "Images of text" appear in a red font, distinct from the other three items, which are in a blue font. The items in red indicate these elements are missing, but a screen reader would not describe the color to a reader, thereby leaving out important information.

Certain colors–for example, red and green–are commonly used to denote information, like "red" for "wrong" or "green" for "good".

But relying on the color alone to convey the meaning of something excludes readers who can't see the colors.

How do I use elements other than color to convey meaning?

Use additional elements, accessible to screen readers and other readers with visual impairments, to describe and clarify data or content you're presenting in your design.

Let's take the list above. To make it more accessible, the red items now appear with the qualifier "missing" next to them, and the blue items appear next to "confirmed", clarifying for disabled readers or accessibility tools like screen readers what the colors signify.

The same list as above appears with five items, now described by qualifiers: Document title (missing), Color contrast ratios (confirmed), Document language (confirmed), Alt text (confirmed), Images of text (missing).

Here's an example of a design with low accessibility in a table of "dos and do nots" for creating accessible content:

A list of six points relating to accessible 'Dos' and 'Don'ts'. The top three points appear on a green background, with an icon of a white checkmark on a green circle on the left side. The next three rows appear on a red background, with a white 'x' on a red circle beside them.

This list of six points is presented using color and icons to clarify which of the items are correct (good to "do") and which of the items are incorrect ("do not").

The first three points:

  • Use alternative (alt) text

  • Tag section headings and titles

  • Use color contrast rations for visibility

appear on a green background, next to an icon of a white checkmark on a green circle. Visually, an unimpaired reader might understand that these items are correct, and represent the "Dos" in the list. But a color blind viewer might not perceive the green clearly, making the visual somewhat confusing.

A screen reader would be able to read the text in these points, but would miss the light green background.

Alt text could describe the white checkmark on a green circle, but wouldn't clearly convey the icon position relative to the items in the list.

Similarly, a screen reader would be able to read the next three points in the list:

  • Rely only on color to indicate meaning

  • Describe decorative elements with alt text

  • Use images of text for content-related text

but without being able to see the light red background, or understand where the icon of the white 'x' on a red circle appears beside it, the meaning of these "Don't" points is lost.

Let's try this again, with the same information, in a more accessible format:

A table design, with the same six points used above, separated into two columns. In the first column on the left, under the header 'Don't', the following points appear: Rely only on color to indicate meaning, describe decorative elements with alt text, use images of text for content-related text. In the second column, under the header 'Do', the following points appear: Use alternative (alt) text, tag section headings and titles, use color contrast ratios for visibility.

With the column headings properly tagged, accessible color contrast ratios and a larger font size, the information in this table becomes more accessible to visually impaired readers as well as screen readers. With each column indicating the context of the listed points, a screen reader can read out which is a "Do" and which is a "Don't".

The checkmark and 'x' icons become decorative and don't need to be described by alt text in order for readers to understand the meaning of the information in the table. Likewise, the color coding (red for "don't" and green for "do") is not crucial to understand; the heading at the top of each respective column provides that information.

How do I make color-coded charts more accessible?

Use texture, differences in line style, text in graphs (direct labelling) or different shades of color to improve chart accessibility for colorblind users. Charts should be readable in black and white.

Use (white) space between chart columns and data to make it easier to understand.

Take the two charts below, showing the same data related to survey respondents' preferences for different kinds of fruit:

Image of a bar chart, under the heading 'Why is Color Coding Not Accessible?' The chart is titled 'Fruit Preferences' and shows four groups of vertical bars coming up from the X-axis. The Y-axis shows a range from 0 to 35.

In the first chart (pictured above), the title "Fruit Preferences" indicates the topic. The columns are grouped by fruit type, and each bar group is labelled: apple, orange, strawberry and watermelon.

The bar colors represent preferences: blue for "like", orange for "neutral" and green for "dislike", clarified by the legend at the bottom of the chart's X-axis.

The number of respondents in each preference category and fruit type is indicated by the heigh of each bar, with numbers in intervals of 5 visible along the Y-axis.

In the second chart (pictured below), the composition of the columns and their grouping by fruit type (labelled on the X-axis), as well as the data increments on the Y-axis, are the same as in the first chart.

The color of each bar is the same as in the above chart, but the bars are also differentiated by unique patterns:

  • Blue and diamond pattern for "like"

  • Orange and diagonal stripes pattern for "neutral"

  • Green and lattice pattern for "dislike"

Image of the same bar chart, titled 'Fruit Preferences'. In addition to the elements described above, each bar in the bar chart (grouped by fruit type) is also labelled with the preference and number of respondents, which appears at the top of each respective bar. From left to right: Apples - 25 Like, 13 Neutral, 18 Dislike. Oranges - 25 Like, 18 Neutral, 13 Dislike. Strawberries - 23 Like, 20 Neutral, 13 Dislike. Watermelons - 15 Like, 30 Neutral, 11 Dislike.

In the second chart, the labels above each bar also make the data clearer and easier to read.

In this side-by-side comparison of the charts (pictured below), the colors have been converted to grayscale to simulate how someone with visual impairment might read the charts.

 

The two bar charts described above, pictured side-by-side. The colors have been converted to greyscale to make the comparison between the colored bars and patterned bars easier to perceive.

It is easier to distinguish between the three columns of each grouping in the chart with the bars that have a pattern.

The same goes for the line charts in the side-by-side comparison below:

Two line charts with the same data, displayed side by side. The first is above the heading 'Inaccessible Line Chart'. The second appears above the heading “Accessible Line Chart”. Both charts are entitled 'Preferred Operating System'. The X-axes displays a range of years beginning with 1990 and ending with 2003; the Y-axes is labelled “Percentage of Users” and goes from 0 to 100. Three lines appear on each chart. The first line, “Windows”, goes from somewhere around 10% of users in 1990 to around 85% of users in 2003. The second line, Linux, begins at 0% around 1999 and climbs to about 10% in 2003. The third line, Macintosh, begins at 85% in 1990 and drops to about 5% in 2003.

In the "Inaccessible Line Chart", the colors representing each operating system (red for "Windows", green for "Linux" and blue for "Macintosh") are difficult to visually distinguish, especially for someone with color blindness.

In the "Accessible Line Chart", each line is given a different pattern as well as color (dark blue and long dashes for "Windows", dark green and solid for "Linux", red and small dashes for "Macintosh") to make them easier to distinguish. Each line is also labelled, making it easier for viewers to identify the lines without having to refer to the legend.

Add a pattern to any chart in your accessible design to make it easier for readers to differentiate between different data sets.

 

The feature(s) discussed in this article is available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

Curious about upgrading? Compare our plan features side by side.

Start designing!

Was this article helpful?

1 out of 2 found this helpful

Have more questions? Submit a request