Color is only one of many visual tools that can be used to convey information and guide readers through a document. According to the Web Content Accessibility Guidelines (WCAG), an accessible document or webpage must ensure that information is not communicated by color alone.
How Does Color Affect Document Accessibility?
Readers who are color blind, visually impaired, or who use accessibility tools like screen readers require more than color cues to understand content. Screen readers do not describe color, so if color is the only cue used to indicate meaning, a screen reader will miss it completely.
Example:
A bulleted list appears on a light blue background, with five items:
Document title
Color contrast ratios
Document language
Alt text
Images of text
The first and last items (“Document title” and “Images of text”) appear in red font, while the rest appear in blue. The red text indicates missing elements, but because a screen reader does not announce color, that meaning would be lost for users who rely on one.
Certain colors—such as red and green—are often used to denote meaning (“red” for “wrong,” “green” for “good”), but relying on color alone to communicate information excludes readers who can’t see those colors.
How Do I Use Elements Other Than Color to Convey Meaning?
To make your content accessible, use other visual and text-based elements that screen readers and users with visual impairments can understand.
Let’s return to the list above. To make it more accessible, we can add text qualifiers that describe the meaning of the colors:
Document title (missing)
Color contrast ratios (confirmed)
Document language (confirmed)
Alt text (confirmed)
Images of text (missing)
Now, the information about what’s “missing” or “confirmed” is clear even without color.
Example: Accessible “Do and Don’t” List
Here’s an example showing how to present a list of “dos and don’ts” in an accessible way.
A list of six points relating to accessible design is shown:
The top three points appear on a green background, with an icon of a white checkmark on a green circle.
The next three points appear on a red background, with a white “x” on a red circle beside them.
The six points are:
Dos (green background):
Tag section headings and titles
Use color contrast ratios for visibility
Don’ts (red background):
Rely only on color to indicate meaning
Describe decorative elements with alt text
Use images of text for content-related text
While this design makes sense visually, it’s not accessible for everyone. A color-blind reader may not distinguish red from green, and a screen reader wouldn’t describe the colors or their meaning.
Alt text could describe the icons (checkmarks and x’s), but it wouldn’t clearly explain which points are correct or incorrect unless additional context is included.
Improved Accessible Version
To make the same list accessible, reorganize it into a table with clear column headers and text indicators:
With this table format:
Column headings (“Do” and “Don’t”) are read by screen readers.
Color contrast and font size can be adjusted for better visibility.
The checkmark and “x” icons become decorative and are no longer essential for meaning.
Even if the colors (red/green) are removed, the structure still communicates clearly.
How Do I Make Color-Coded Charts More Accessible?
Charts are a common area where accessibility can be overlooked. When charts rely only on color to differentiate data, they become unreadable to color-blind users.
Here are some ways to improve chart accessibility:
Use patterns, textures, or line styles instead of relying only on color.
Add direct labels to each data point or section.
Ensure charts remain legible in grayscale.
Use white space between chart columns for clarity.
Example 1: Color-Coded Bar Chart
Inaccessible Version:
A bar chart titled “Fruit Preferences” shows four fruit types—Apples, Oranges, Strawberries, and Watermelons. Each group has three bars:
Blue = “Like”
Orange = “Neutral”
Green = “Dislike”
A legend below the chart explains these colors. The chart uses color only, so color-blind or visually impaired readers cannot easily distinguish between the bars.
Accessible Version:
In the improved chart:
-
Each bar still uses color, but also includes patterns:
Blue with diamond pattern for “Like”
Orange with diagonal stripes for “Neutral”
Green with lattice pattern for “Dislike”
-
Each bar has a direct label showing both the category and value:
Apples – 25 Like
Oranges – 25 Like
Strawberries – 23 Like
Watermelons – 15 Like
This makes the chart readable even when printed in black and white.
Example 2: Grayscale Comparison
In a side-by-side comparison, both charts are converted to grayscale.
In the color-only chart, the bars blur together.
In the patterned chart, the bars remain distinct.
This demonstrates that the accessible version communicates information clearly, even without color.
Example 3: Accessible Line Chart
Inaccessible Line Chart:
A line chart titled “Preferred Operating System” uses three colored lines to show trends from 1990 to 2003:
Red for “Windows”
Green for “Linux”
Blue for “Macintosh”
These colors are difficult to distinguish, especially for color-blind users.
Accessible Line Chart:
The same chart is redesigned to use:
Dark blue with long dashes for “Windows”
Dark green with a solid line for “Linux”
Red with small dashes for “Macintosh”
Each line is directly labelled with its name and percentage, making it readable without needing to reference a color legend.
Best Practices for Accessible Use of Color
✅ Use color plus another indicator (e.g., text, pattern, icon).
✅ Label or describe charts directly.
✅ Check your color contrast ratios for readability.
✅ Test your design in grayscale to simulate visual impairments.
✅ Avoid relying solely on red and green for meaning.
✅ Ensure screen readers can convey the same information through text.
Summary
Color adds vibrancy and clarity to designs, but when used alone, it can unintentionally exclude users with visual impairments. Combining color with text, labels, and accessible formatting ensures that everyone—regardless of ability—can perceive and understand your content.
By applying these accessibility principles, you’ll create designs that are both visually appealing and inclusive.
Curious about upgrading? Compare our plan features side by side.