Color Contrast

Color contrast is about how one color stands out from another color. It’s especially important to consider the color difference between text and the background, and between sections depicting meaning such as pie charts, maps, etc.

Here is an example showing how difficult it is to read text with insufficient contrast.

Most people prefer good contrast – it’s easier for everyone to read. But poor contrast especially impacts people with low vision and with color blindness.

• Use a contrast checking tool. Visit the color contrast tools page for more information.
• Choose a color scheme that provides high contrast between the text and the background. If you have a dark background, the text should be light, and vice versa. (Black and white provide maximum contrast.)
• Avoid the following color combinations:
  • Green and red (or related colors)
  • Blue and yellow (or related colors)
• Use larger text and simple (not ornate) fonts. Sans serif fonts are preferable.
• Don’t rely on color as the sole means of conveying information. For example, don’t use color as your only method of indicating heading levels.
• Use bold instead of color for emphasis.
• Text can be difficult to read on photographic or gradient backgrounds. Set text against a solid background when possible.

CSU’s Brand colors are designed with accessibility in mind. The Brand includes approved color combinations for various text and background colors. These are the only approved color combinations in the CSU Brand, determined after extensive accessibility testing. This takes the guesswork out of choosing text and background colors.

Visit the Brand Color website and look for the “Color Pairings for Accessibility” section. Any color combination that says “AA18” means it passes accessibility requirements only if the text is size 18pt or larger.