Color Contrast

Executive Summary

When using color, it is essential to meet color contrast standards. Minimum standards, set forth by WCAG's guidelines, must be met for your content to be usable by persons with certain types of visual impairments. It is also important to avoid using only color when placing emphasis, indicating actions, or identifying differences within text. For instance, rather than using red text to indicate key concepts in a document you could use red text that is also bolded or italicized. Details for proper accessibility in different document types will be available in the tutorial for the document type, e.g., Microsoft Word, HTML.

Page Contents

• Introduction
• Facts about Color Blindness
• Meaning via Color
• MSU Accessible Color Chart
• Additional Resources

Introduction

Color is an effective way to incorporate design elements into your documents and websites. However, it is important to make sure that fonts and images have enough contrast or use other mechanisms to help visually impaired users interact with the content.

The two most important rules about color contrast are:

1. Do not rely solely on color to convey meaning

2. Ensure that there is adequate contrast between foreground and background colors

Color contrast ratio is defined as the ratio between the brightest color to that of the darkest color with the highest ratio being black to white. When color is used as the visually distinguishing technique, the minimum contrast ratio allowed between regular text and the color distinguished text is 3:1. For foreground to background the minimum requirement is at least 4.5:1. To reach a wider audience the AAA standard is 7:1 so we recommend going beyond the minimum 4.5:1 for the contrast ratio foreground to background.

The WCAG guidelines also require a minimum contrast ration of 3:1 for non-text content as specified in WCAG 2.1 1.4.11 (AA) Non-text Contrast.

Facts about Color Blindness:

Color blindness is the inability to distinguish between certain colors. Color blindness also affects a person's ability to see certain colors.

• 1 in 12 men and 1 in 200 women are color blind in the United States. Based off these numbers, there would be at least 2,500 individuals at MSU that are color blind.

• Red – Green colorblindness is the most common. In addition, yellow/blue and red/black colorblindness can occur.

Meaning via Color

It essential that color itself is not the only means of conveying information. When placing emphasis on a specific piece of text or denoting differences among text, it is required that more than color be used to convey this information. It is not advised to use fonts as a method to convey meaning.

Examples of methods for text in addition to the use of color contrast are:

• underline (e.g., recommended only for links)

• added text (e.g., "Important:")

• font style (e.g., italics, bold)

MSU Accessible Colors

It is essential that there is appropriate contrast between text and the background behind it. In general, lightly colored text should have a darker background and darkly colored text should have a light background. The chart below shows MSU colors with naming conventions specifically for this tutorial, as well as their HEX codes. Please refer to specific Hex codes if you are using it for any other purpose.

MSU Brand Standards Color Builds

Core Colors

Accent Colors

The table below details which MSU color combinations provide sufficient color contrast between text and background color. This table demonstrates which color combinations pass for both large and small text. Large text is defined as 18-point text or 14-point bold text since it is large enough to require a lower contrast ratio. Small text would be considered 14-point or smaller non-bolded text.

*Although all colors in this table meet the minimum contrast ratio, each color has a variance in ratio. We recommend taking this into consideration when choosing which colors to use in your content.

Accessible AA Level MSU Brand Standard Color Combinations

Additional Resources

• How to check for color contrast YouTube video tutorial (10-minute video)
• Deque Color Contrast Analyzer free tool
• Adobe Color contrast checker and color blind safe tools