- Home
- Getting Started
- Policy & Guidelines
-
Tutorials
- Accessibility Basics
- Microsoft Word
- Microsoft PowerPoint
- MathType for Equations
- Mathematical Expressions & MathML in Desire2Learn
- D2L Course Accessibility
- Accessible PDFs
- Adobe InDesign
- Microsoft Publisher (Windows)
- Hiring a Third Party Captioning Service
- Creating Your Own Captions
- Uploading a Video to Kaltura Mediaspace
- Attaching a Caption File to Kaltura Mediaspace
- Google Drive Documents
- Microsoft PowerPoint
- Templates
- Help & Resources
- A Guide for Captioning Video
- Captioning Resources
- Classes & Workshops
- Basic Checklist: Online Content Accessibility
- Evaluation & Validation
- Contacts
- Web Accessibility Policy Liaisons
- Course Accessibility Badge and Course Accessibility Review
- Prioritization Guidance
- Faculty Accessibility Questions about Digital Content
- Getting Started with MSU Crowd Sourced Closed Captioning
- Spartan Ally
- EquatIO
- WAPL Schedule
- Report an Accessibility Problem
- IT Next Conference
- Home >
- Tutorials >
- Accessibility Basics >
- Color Contrast
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
- Facts about Color Blindness
- Meaning via Color
- MSU Accessible Color Chart
- Additional Resources
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 |
|
|
Light Green | #0DB14B RGB: 13, 177, 75 |
|
|
Grey | #97A2A2 RGB: 151, 162, 162 |
|
|
Orange | #F08521 RGB: 240, 133, 33 |
|
|
Blue Green | #008183 RGB: 0, 129, 131 |
|
|
Grey Blue | #909AB7 RGB: 144, 154, 183 |
|
|
Dark Grey | #535054 RGB: 83, 80, 84 |
|
|
Yellow | #D1DE3F RGB: 209, 222, 63 |
|
|
Light Tan | #E8D9B5 RGB: 232, 217, 181 |
|
|
Dark Tan | #C89A58 RGB: 200, 154, 88 |
|
|
Olive Green | #94AE4A RGB: 148, 174, 74 |
|
|
Purple | #6E005F RGB: 110, 0, 95 |
|
|
Dark Orange | #CB5A28 RGB: 203, 90, 40 |
|
|