Skip to main content
Menu

Color Contrast

Executive Summary

When using color, it is essential to meet color contrast standards. Minimum standards, set forth by WCAG's AA guidelines, must be met for your content to be interpreted correctly by users with visual impairments. It is also important that when placing emphasis and denoting differences within text, more than just color alone is used. Examples of this include the use of bold, italics, underline, and added text. 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

Color is an effective way to incorporate design aspects 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.

While the WCAG 2.0 guidelines have no specific criterion for color contrast of non-text elements (such as logos and graphics), they do recommend minimum requirements of 3:1 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 Naming Convention

MSU Brand Standards Color Palette Hex code
MSU Green #18453B
Light Green #0DB14B
Grey #97A2A2
Orange #F08521
Blue Green #008183
Grey Blue #909AB7
Dark Grey #535054
Yellow #D1DE3F
Light Tan #E8D9B5
Dark Tan #C89A58
Olive Green #94AE4A
Purple #6E005F
Dark Orange #CB5A28

The table below gives you a better idea of what MSU colors work with each other in terms of sufficient color contrast. 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

Background Color Name Hex code
RGB
Pass Large Text Pass Small Text
MSU Green #18453B
RGB: 24, 69, 59
  • Dark Tan
  • Orange
  • Olive Green
  • Grey Blue
  • Light Green
  • Grey
  • White
  • Light Tan
  • Yellow
  • Light Tan
  • Yellow
  • White
Light Green #0DB14B
RGB: 13, 177, 75
  • MSU Green
  • Purple
  • Black
  • Black
Grey #97A2A2
RGB: 151, 162, 162
  • MSU Green
  • Dark Grey
  • Purple
  • Black
  • Black
Orange #F08521
RGB: 240, 133, 33
  • MSU Green
  • Purple
  • Dark Grey
  • Black
  • Black
Blue Green #008183
RGB: 0, 129, 131
  • Light Tan
  • Yellow
  • White
  • White
Grey Blue #909AB7
RGB: 144, 154, 183
  • MSU Green
  • Purple
  • Black
  • Black
Dark Grey #535054
RGB: 83, 80, 84
  • Light Tan
  • Dark Tan
  • Orange
  • Olive Green
  • Grey
  • Yellow
  • White
  • Light Tan
  • Yellow
  • White
Yellow #D1DE3F
RGB: 209, 222, 63
  • MSU Green
  • Blue Green
  • Purple
  • Black
  • Dark Grey
  • MSU Green
  • Purple
  • Black
  • Dark Grey
Light Tan #E8D9B5
RGB: 232, 217, 181
  • Blue Green
  • Black
  • MSU Green
  • Dark Grey
  • Purple
  • Black
  • MSU Green
  • Dark Grey
  • Purple
Dark Tan #C89A58
RGB: 200, 154, 88
  • MSU Green
  • Dark Grey
  • Purple
  • Black
  • Black
Olive Green #94AE4A
RGB: 148, 174, 74
  • MSU Green
  • Dark Grey
  • Purple
  • Black
  • Purple
  • Black
Purple #6E005F
RGB: 110, 0, 95
  • Dark Tan
  • Light Tan
  • Yellow
  • Orange
  • Olive Green
  • Grey Blue
  • Light Green
  • Grey
  • White
  • Light Tan
  • Yellow
  • White
  • Olive Green
Dark Orange #CB5A28
RGB: 203, 90, 40
  • White
  • Black
  • Black

Additional Resources