Fundamentals: Color

Find out how to make sure the colors you are using are accessible for individuals who are blind, have low vision, or colorblindness. Learn about color contrast ratios, not using color alone for meaning, and tools and techniques that can help you determine if the colors you are using are useful to everyone.

You can view this in single page view, that provides all content at once for reference, or you can view this page in guided view, which breaks the content down into sections so you can focus on one part at a time.

Considerations for using color

Color is often used to convey meaning. Bright colors might be used to get attention, or as an alert or warning. It's important that those colors aren't the only thing conveying meaning in a digital environment. Many users can't see or differentiate colors and screen reader software won’t communicate the colors to the user.

It's also important that colors have proper contrast with their background, particularly for text, to make sure that your content is legible for users with low vision or colorblindness.

A real-world example of accessible use of color

Consider a stop sign. Stop signs are one of the most important signs on the road. There are three consistent attributes for a stop sign:

A bright red color
The word STOP in white that is in high contrast with the red
An octagon shape
Does the image have any meaning at all?

The red draws attention, the word stop is in high contrast and tells you what to do, and the shape is unique from other road signs. If you can't read the word "stop," or can't see the color red, you still have other attributes to rely on to help you understand the meaning. This exemplifies the two most important concepts for color and accessibility: contrast and not using color alone. Make sure whenever you use color, whether it's for alerts, status, data visualizations, or other purposes, that color is supplemental to the content.

Color contrast

To ensure text and interactive elements are legible and easily found, these items should have certain color contrast ratios. A contrast ratio is determined by the difference in brightness between two colors. It's not always easy to tell by looking if you've met a contrast ratio, which is why we have a list of colors that work together from the Massachusetts Design System, and tools to test when you are using other colors. Text should have at least a 4.5:1 contrast ratio with its background, and interactive elements like buttons or icons should have at least a 3:1 contrast ratio.

Color contrast tools

Here are a few free tools to help you check color contrast.

Text over colors

The following examples test the contrast of white and black text over a background blue color.

White text reading good contrast over a dark blue background. — This white text over dark blue is an example of good text contrast. It passes our contrast ratio test at 7.7:1.

Black text reading bad contrast over a dark blue background. — This dark grey text over the same dark blue is an example of poor text contrast. It is more difficult to read and fails the contrast ratio test at 2.4:1.

White text reading mixed contrast over a gradient that fades from light blue on the left to black on the right. — This example has a gradient background, so the text on the left fails contrast, while the text on the right passes. Be careful when using gradients, and be strategic about text placement.

Text over images

Text over an image is often used on websites. This can often be challenging to do accessibly because an image contains many colors. You will need to modify most images to do this successfully. You can darken a whole image or just part of an image to put white text over it. You can also be strategic about text placement.

Avoid images of text

An image of text should generally be avoided, because a screen reader will not find this text, and it is often too much to put into alt text. Text should be actual readable text floating over the image on a web page or in a PDF, and not flattened into the image. [Learn more about text in images.](alt-text.md)

Text reading Camping Trips over an image of a forest. — Both white and black text would fail contrast in this example, because of the mix of light and dark colors in the image.

Text reading beach vacations in white over dark sand. — Strategically placing text in the dark area of this image makes the text pass contrast.

Text reading Fall Destinations over an image of a street lined with colored leaves. A dark transparent box is placed behind the text. — A darkened background has been added behind the text in this image to allow for passing contrast.

Avoid using color alone

Color should never be the only thing used to convey meaning. The most common color combination used to mean something is red and green. Ironically, the most common form of colorblindness causes challenges in telling red and green apart — and that is something that affects 1 in 12 men. Low vision and cataracts can also prevent someone from being able to recognize certain colors. This doesn't mean color can't be used, it means we want to ensure that there is an additional indicator to convey meaning.

Make sure whenever you use color, whether it's for alerts, status, data visualizations, or other purposes, that color is supplemental to the content.

Color as an indicator

Let's compare examples where color is used. Following are two examples of a status chart. One incorrectly uses color alone, the other correctly uses color as a supplement.

A status chart where red, yellow and green dots are used to indicate status. — **Fail:** In this chart, a red, yellow, or green circle indicates status. This pattern uses color alone to indicate this status, so it fails the criteria for using color alone.

A status chart where symbols of an X, exclamation and checkmark are used to indicate status. — **Pass:** Color is used as a supplement to a symbol in this pattern. For screen reader users, alt text would need to be added to these symbols, such as “good,” “at risk,” and “failing.”

Color as an identifier

In the case of a visualization like a map, color is often used to identify categories or areas. Color can still be used in this case, so long as there is an additional way to identify the category without the color.

Following is an example of an (unofficial) map of Massachusetts regions with a color-coded legend. The first map uses color alone, the following uses letters as an additional identifier. Letters are not the only way to do this. Shapes, patterns, or arrows connecting the legend to the regions can be used.

A map of massachusetts where color is used to identify seven regions. — **Fail:** This map uses color alone to identify regions of the state, and has contrast issues between region colors.

Color in data visualization

It is important to be strategic in the way we use color in data visualizations like charts and graphs.

Learn more about data visualization.

Interactive: Practice identifying good color contrast

In the following interactive practice, review multiple text and color combinations and try guessing which pass and fail. Or use the tools linked after the practice to test the color combinations and know for sure.

Open the Color Contrast interactive practice

Continue learning

Alt text for images Document and page structure Text and content

This Digital Accessibility at the commonwealth site provides enterprise accessibility governance and technical guidance. It is not legal advice and does not replace applicable statutes, regulations, statewide policies, procurement requirements, standards, or contractual obligations. Where inconsistencies arise, governing law, policy, standards, and contract provisions control. You should consult your legal counsel and qualified accessibility professionals when assessing obligations under applicable federal and state accessibility laws and standards.

Official websites use .mass.gov

Secure websites use HTTPS