The term “color contrast” describes the difference between text and the background. Low contrast affects readers with low vision and color blindness.

Tips for Color Use
  • 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 gold from the CSU brand should not be used for text (use this combination for decoration only).
    • 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.
  • Use a contrast checking tool. We recommend the Colour Contrast Analyser by the Paciello Group.
  • If you are building a webpage, check it with a color blindness simulation tool.
  • 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.
  • Text can be difficult to read on photographic or gradient backgrounds. Set text against a solid background when possible.

To understand the concept of color contrast, it helps to begin with an exercise that may seem counter-intuitive: visualizing a grayscale spectrum, with black and white at opposite ends and shades of gray in between. The farther apart two tones are on the spectrum, the higher the contrast. This is especially true of tones that appear adjacent to one another in the photo or on the page. In the figure below, the light fur on the lion's upper lip contrasts with his dark nose and lips. Similarly, his light whiskers stand out due to the contrast between them and the darker background.

Grayscale photo, with highlight and shadow tones connected to corresponding tones on scale

Now, let’s add color to the equation. As seen in the image below, contrast increases when two colors move apart on the color wheel. Colors at opposite sides of the wheel are known as complementary colors.

photo, with key colors connected to the color wheel

We can combine these principles and apply them to text. The figure below illustrates several text/background combinations, in grayscale and in color, that produce contrast that's high (easy to read) and low (difficult to read).

Eight examples of text on a colored background, in grayscale and color,ranging from high to low contrast

Note that when it comes to the legibility of colored text on colored backgrounds, complementary colors are not always best. In fact, two complementary colors can result in a combination that is very difficult to read. In the figure below, the red text on a light blue background—colors taken from color wheel example above—produce a combination that is almost illegible. On the other hand, the dark blue text on a yellow background, again complementary colors, produce a level of color contrast that is easy for most people to read (although a rare form of blue-yellow color blindness could make this combination problematic).

Complementary colors can result in varying contrast ratios.

Installing the Colour Contrast Analyser (CCA)

When text is placed against a solid color background, we recommend you use the free Colour Contrast Analyser (CCA) to determine whether the contrast ratio passes WCAG AA standards.

On the download page under Assets:

  • For Mac, download the CCA-3.0.1.dmg file
  • For Windows, download the CCA-Setup-3.0.1.exe file

Download page with .dmg and .exe options

Using the CCA

Use the eyedropper tool to select foreground and background colors. The results display immediately, showing either pass or fail for both AA and AAA standards. In the following example, we’ve run the CCA on a website designed with orange headings, gray text, and blue link text.

website with poor contrast between headings and background

There is insufficient contrast between orange text and the white background. To find a different color with sufficient contrast, you can use the drop-down menu or insert hex codes. You would want to select a darker orange color from the drop-down color palette.

Colour Contrast Analyser, showing insufficient contrast between orange headings and white background

AA vs AAA

When we check the gray text against white background, the CCA shows mixed results. This color combination passes at the "AA" standard, but not the more stringent "AAA" standard, which is the goal for most university and public websites. A darker gray would be better.

Colour Contrast Analyser showing mixed results with gray text on white background

Finally, we test the blue link text against the white background. This combination of colors fails both the “AA” and “AAA” standards for normal text sizes, as well as the “AAA” test for larger sizes. It passes only the “AA” standard for large text. A darker blue is required for universal readability.

Colour Contrast Analyser showing failure with blue colored link text on a white background

The Paciello Group's Colour Contrast Analyser and the WAVE Tool both assume that text is placed against a solid background. They cannot always account for text placed on gradient backgrounds or images. In Chrome, you can use the Color Contrast Analyzer Extension, which evaluates a page exactly as it appears in the browser.

This tool repaints the page so that you can see the edges of the text, and discover which text fades into the background. If there is an item that is not outlined, then the item does not have sufficient contrast. The example below shows a before and after view of the extension. In the 'after' view, only the text that is outlined in white has sufficient contrast. You can see that the white text fades into the lighter areas of the background photo.

Image with faded text before using the colour contrast analyser extensionImage with faded text after using the colour contrast analyser extension.