Introduction to Color and Contrast

Summary

Making good color choices ensures that information is visible to as many sighted readers as possible and can be understood even when printed in grayscale, with all color removed. This includes text, buttons, icons, and any other content that has meaning or conveys information. Color affects accessibility in two ways:

• Colors must have good contrast so information stands out from the background.
• Content must not rely on color alone to convey information.

Poor color choices can impact all of us in certain situations, such as viewing a phone screen with sun glare or a computer in low-light conditions. However, they can have a particularly significant impact on individuals with color blindness, low or limited vision, and those with certain cognitive disabilities. Even people who are blind can be impacted when color alone conveys information. Good color choices can be the difference between content that is easy for everyone to see and use, and content that can actually prevent people from understanding information or completing a task.

Overview

Two key concepts ensure everyone can distinguish color differences to read text and understand informative visual cues that are based on color:

1. Have good color contrast.
2. Never rely on color alone.

When we talk about color contrast, we usually mean the difference in brightness between two colors. This may be:

• text or other meaningful page content and the background;
• the colors of a border and the colors within; or
• adjacent blocks of color that convey meaning, such as in a pie chart.

In short, color contrast defines how well content stands out. For example, light gray text on a white background is hard to read. When people age or have low vision, good contrast makes reading and understanding content much easier.

Figure 1: Have Good Color Contrast

Watch this short Colors with Good Contrast video from the Web Accessibility Initiative to see how good contrast supports people with disabilities while providing a better experience for everyone.

Never relying on color alone to convey information means that when the color is informative, there must always be a second indicator in addition to the color. This might be:

• adding a message explaining form errors in addition to turning form fields red;
• adding patterns to each line in a graph; or
• adding pass and fail indicators on a spreadsheet in addition to red and green background colors.

Always providing a second indicator helps people understand the information conveyed by color. For example, providing instructions to “click on the blue button” can prevent an individual from completing a task if they cannot correctly perceive color. Instructions telling users to “click on the blue Submit button” make it easy for everyone to successfully complete this task.

The colors red and green can be used to illustrate both of these concepts. Anyone who is familiar with color blindness has probably heard that red and green cannot be used together. This is true when the red and green used have poor contrast and no other indicators are used to distinguish them. Adding a second indicator ensures that even red and green are understood by all individuals.

The following image shows how Protanopia can impact someone’s understanding of the information conveyed by color. Protanopia is a form of colorblindness characterized by a defective perception of red. Red and green look very similar for people with Protanopia, especially when both colors have the same level of relative brightness or luminosity.

Figure 2: Never Rely on Color Alone

Figure 2 contains five examples of red and green colored blocks, both before and after a Protanopia filter has been applied. With the addition of secondary indicators, the difference between any two colors can be understood - even when the Protanopia filters are used.

• Original Colors: The first row of this example shows the original red and green color blocks that have almost the same level of relative brightness. For someone with Protonopia, these low-contrast colors are almost the same.
• Good Contrast: The second row of red and green blocks has a much higher contrast as the red is much darker than the green. Good contrast serves as a second indicator to distinguish the two colors.
• Icons/Text: The third row of red and green blocks has poor contrast, but the addition of icons as second indicators (“X” for bad and “check” for good) conveys the meaning of the colors.
• Presence/Absence: In the fourth row, only the red block is present. This technique is often used to indicate an event, such as an error. The lack of errors is not indicated.
• Pattern: The last row uses different patterns as second indicators. This is another common technique used to reinforce the meaning of colors.

Who is Helped

Accessible color choices help people with color blindness, low or limited vision, people who are blind, and people with certain cognitive disabilities. In some cases, individuals may require custom colors of their own choice.

People with color blindness, or low or limited vision:

• Rely on good color contrast to discern the differences between colors. Without good contrast, information may be difficult or even impossible to see.
• Cannot always distinguish between colors and will not understand any content that relies solely on color to convey information.

People who are blind:

• Generally cannot understand information based only on color or changes in color unless text labels or alternative text also provide that information. Screen readers have settings that will read color changes in the text, but they are rarely turned on.

People with cognitive disabilities:

• Oversaturated, high-contrast colors or large amounts of bright yellow, orange, or red can cause difficulties for people who are neurodivergent and sensory-sensitive.
• Very high-contrast color combinations, such as black text on white, can cause difficulties for people with dyslexia, Irlen Syndrome, light sensitivity, and autism.

People requiring specific colors:

• Some individuals need to use specific colors to see information on the page.
• Ensure that people can use the operating system, browser settings, or assistive technology to override text and background colors and select their own colors.