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.
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:
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 ratio of 3:1 for non-text content as specified in WCAG 2.1 1.4.11 (AA) Non-text Contrast.
Color-blindness is the inability to distinguish between certain colors. Color blindness also affects a person's ability to see certain colors.
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:
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.
| Color | Hex code | RGB Code | CMYK Code |
|---|---|---|---|
| Spartan Green | #18453B | R=24 G=69 B=59 | C:82 M:0 Y:64 K:70 |
| White | #FFFFFF | R=255 G=255 B=255 | C:0 M:0 Y:0 K:0 |
| Black | #000000 | R=0 G=0 B=0 | C:0 M:0 Y:0 K:100 |
| Color | Hex code | RGB Code | CMYK Code |
|---|---|---|---|
| Kelly Green | #008208 | R=0 G=130 B=8 | C:95 M:0 Y:100 K:27 |
| Lime Green | #7BBD00 | R=123 G=189 B=0 | C:50 M:0 Y:100 K:0 |
| Excellence Green | #0B9A6D | R=11 G=154 B=109 | C:83 M:15 Y:73 K:2 |
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.
| Background Color | Large Text | Small Text |
|---|---|---|
| Spartan Green |
|
|
| White |
|
|
| Black |
|
|
| Kelly Green |
|
|
| Lime Green |
|
|
| Excellence Green |
|
|