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:

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.

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

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:

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:

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"

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.

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:

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.

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

Start designing!