Never Rely on Color Alone

10 minute read

Last updated: Feb 23, 2026

Summary

We often use color to convey meaning. However, using color alone to communicate information can cause barriers for many people. People who are color-blind or have low or limited vision will not always be able to distinguish between colors. Many people lose the ability to see colors well as they age. And people who are blind will not see color at all. Adding at least one other indicator when the color has meaning ensures everyone can understand the information.

Overview

Color can call attention to content, help sighted individuals quickly perceive and process information, create a mood, and brand a product. Color is an effective visual design strategy that helps many people better understand content. However, some people can’t distinguish between colors. Telling someone to “click on the blue button” or to “correct errors indicated in red” can prevent an individual from completing a task if they can’t correctly perceive color.

As a result, while using color to enhance content benefits some people, color alone is insufficient to ensure everyone can understand the information it conveys. Always add at least one other indicator when the color has meaning to ensure everyone understands your information.

Who is Helped

Color-blind individuals often cannot distinguish between colors. These individuals may not understand content that relies solely on color to convey information. The figure below shows the impact of three types of color blindness on how people perceive color.

Protanopia is the inability to distinguish between red and green caused by defects of the red cones in the eye’s retina.
Deuteranopia is the inability to distinguish between red and green caused by defects of the green cones in the eye’s retina.
Tritanopia is the inability to distinguish between yellow and pink and between blue and green, caused by defects of the blue cones in the eye’s retina.

Four color wheels are shown as seen with normal color vision, protanopia, deuteranopia, and tritanopia. — Figure 1: Color Wheel with Color Blindness Filters Applied

Figure 1 shows four versions of a simple color wheel:

The first wheel shows six colors as they appear with normal color vision and includes the hex value of each color: red (E6261C), orange (F5721B), yellow (F7D700), green (06B841), blue (005AAA), and purple (932592).
For Protanopia and Deuteranopia, purple becomes blue and red, orange and green become shades of olive green, and blue and yellow remain close to their original color.
For Tritanopia, blue and green become teal green, and red, orange, and yellow become shades of pink, while purple has more red than usual.

See Color Blindness (Ta11y) for more information on color blindness.

People with low or limited vision benefit from having an indicator other than color, as differences between low-contrast colors can be difficult to perceive. This benefit is also true for older individuals who may no longer perceive color differences accurately.

People with low or limited vision or who use a screen reader may be unable to distinguish between colors quickly.

People who use a screen reader cannot understand information based on color or changes in color. Many of the techniques that may help other users understand color will not work for this group of individuals. Screen reader users need text labels, alternative text, or some other type of text-based description to provide color information. Screen readers have settings that will read color changes in the text, but people rarely turn them on.

Guidelines

People often use color to convey meaning, but you should never use it as the only indicator of meaning. A second indicator besides color is needed to provide information to people who cannot see or understand information when it’s conveyed only by color.

The Web Content Accessibility Guidelines (WCAG) require that whenever you use color to convey information, you must use at least one additional visual element in addition to color. Additional visual indicators can include:

Text or Text Labels
Changes in Contrast
Changes in Size
Changes in Shape
Icons or Symbols
Texture or Pattern
Presence/Absence of Information
Location of Information

In addition, do not use color alone to refer to content. For example:

Avoid: Click on the green button.
Use: Click on the green submit button.

Situations where color is misused to convey information include:

Links that use only a color change to stand out from the adjacent static text.
A form field that uses a red border to indicate a field is required.
A spreadsheet that uses red and green background colors to indicate each project’s current status.

Some people will not perceive the color cues in these examples and will need additional information to understand them.

When you look at the illustration of these examples in Figure 2, the information conveyed by color is lost when you remove the color. It is unlikely that anyone could understand that there is a sentence with an “unsubscribe” link, that the name field in the form is required, or that the status for each project is indicated in the spreadsheet if they cannot see the different colors in each example.

Three examples are shown in color and grayscale, described in the following text. — Figure 2: Examples of Information Conveyed by Color

Figure 2 contains three examples of information in full color and in grayscale. First, the “unsubscribe” link in “You can unsubscribe here” has a different color from the surrounding text but poor contrast. Second, a name field has only a red border to indicate it is required. Third is a project spreadsheet that uses only red and green background colors to indicate “on time” or “past due” status. In grayscale, you can’t see the link, the red border, or the difference between the red and green background colors.

The simple change of adding another indicator in addition to color ensures that everyone can understand the information, even if they cannot perceive the different colors:

Adding a sufficient change in contrast (at least a 3:1 contrast ratio) between the link text and the surrounding text, in addition to using a different color, counts as a second indicator and ensures that people will realize there is a link in the sentence. Even better - underline the link!
Adding an asterisk or text after the name field’s label, in addition to having a red border, clearly tells everyone that the name field is required.
Adding a column with text to the spreadsheet that states whether a project is on time or not, in addition to using red and green background colors, ensures that everyone can understand a project’s status.

Figure 3 shows three examples of information conveyed not only by color but also by another indicator in addition. First, a link to “unsubscribe” in the sentence “You can unsubscribe here” has added good contrast and underlining to the link. Second, a required name field with a red border has added the word “required” to the field’s name label. Third is a project spreadsheet using red and green background colors to indicate status has added a column with text to indicate that each project is either “on time” or “past due.”

It is easy to understand the information conveyed in each of these examples, even when seen without color.

Examples

The following examples illustrate a few of the many issues that arise when using color alone to provide meaning or communicate information. At least one additional visual element is used in each example to ensure viewers can understand the information without relying on color.

Example 1: Location

Traffic lights use location in addition to color to tell drivers when to stop. They are shown first in standard colors: red (top), yellow (middle), and green (bottom). They are then shown for three types of color blindness: protanopia, tritanopia, and monochromacy (no color). Even when people can’t understand the colors, they can understand which light is on due to the location of the lights.

Traffic light shown without a color blindness filter and then with filters for three types of color blindness. — Figure 4: Traffic Light Shown with Standard Colors and for Three Types of Color Blindness

Example 2: Icon and Text

This form field uses an error icon and message in addition to coloring the form field red when users generate an error. Adding the alert icon and error message makes it easy for everyone to understand that an error occurred.

Screenshot of an empty first name form field with a red border, a red error icon to the far right of the input field, and an error message in red below the input field. — Figure 5: Input Error with Added Error Message and Icon

Example 3: Text Labels and Change of Shape

This map uses text labels, different shapes, and color to distinguish between different types of weather event indicators.

Two maps, described in the following text. — Figure 6: Weather Maps using Text Labels and Shapes (Color and Grayscale)

This map shows Caribbean weather conditions in color and grayscale. There are directly-labeled indicators for three weather events:

a round blue marker for a depression;
a red diamond marker for a hurricane;
a green square marker for a storm.

People who are color-blind may not be able to distinguish between the three colors, but they can still understand the map with the addition of the direct text labels and the different shapes.

Example 4: Labels

In the bus map below, someone with Protanopia can’t identify bus routes using only color. The addition of route numbers makes it easy to identify each bus route without needing to rely on color. Labels like these can be critical in helping people with color blindness or low vision understand information. Using different patterns for each bus route could also help make this map easier for everyone.

A map of bus routes is shown with and without a Protanopia filter, described in the following text. — Figure 7: Bus Map with Route Numbers

This bus map uses four colors to identify four different bus routes: blue, purple, red, and gold. With a Protanopia filter applied, the blue and purple routes both look blue, and the red and gold routes both look olive green. Each bus route is identified with its route number in addition to color, and the route numbers are easily understood with or without the Protanopia filter.

Example 5: Multiple Indicators

Complex images like charts and graphs usually benefit from using multiple types of indicators to help differentiate the color-based information they contain. The methods used to supplement color in this example include:

The two lines of data in this graph have sufficient contrast so that the change of contrast counts as a second indicator in addition to the change of color.
Text labels identify each data line - one as apples and one as oranges.
Different patterns differentiate each date line - a dashed line for apples and a solid line for oranges.
Different shapes represent the data points for each data line - circles for apples and squares for oranges.
Each data point is labeled to indicate a specific number of fruit.

Line Graph, in color and grayscale. The graph has a dashed red line labeled apples with three circular data points labeled 2, 4, and 2 over a solid orange line labeled oranges with 3 square data points labeled 1, 2, and 1. — Figure 8: Line Graph using Multiple Indicators in Addition to Color (Color and Grayscale)

Using multiple methods to identify information in addition to color makes this graph accessible to most people who are color-blind or have low vision. Additional text alternatives still need to be added to the image and the page content to support screen reader users. The text alternatives must fully explain the graph by supplying a descriptive title, a summary statement, and a description or table identifying the data points for each data line.

See Complex Images (Ta11y) and Charts and Graphs (Ta11y) for in-depth information on using multiple colors in graphs and other complex images and supporting screen reader users.

How to Test

The easiest way to test this criterion is to view content in Grayscale (Ta11y) and evaluate whether all the content is still understandable. In most cases, there must be a second means of conveying information other than color alone for this test to be successful.

Use an accessibility test tool with a grayscale option, such as:
- Paul Adam’s Grayscale bookmarklet.
- WAVE’s “Desaturate Page” option (see WAVE).
Print content to a grayscale printer.

If color contrast is the second means of conveying information, use a tool like the Colour Contrast Analyser to test the color contrast ratios. When testing text contrast on a website, you can use automated accessibility test tools like the WAVE or ANDI (Tally) browser extensions.

At least a 3:1 contrast ratio must exist between two elements for contrast to be sufficient to distinguish them.
For contrast to be enough to distinguish between text and the background, there must be at least a 4.5:1 contrast ratio between regular text and the background or a 3:1 contrast ratio for large text.

See Text Contrast and Non-text Contrast for more information on color contrast guidelines.

Inspect the content to ensure that elements are not referenced based on color.