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.

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:

Do not rely solely on color to convey meaning
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