The term “color contrast” describes the differences in brightness and color between elements in a photograph or, more importantly for our purposes, text and a colored backgrounds.

Because color contrast is essential to the readability of documents, slide presentations, and websites, it is a key component of universal design. Some of your readers (an estimated 4% of the population) will have low vision. Others (approximately 8.5% of the population) will have some form of color blindness (also known as color vision deficiency), meaning they may have difficulty distinguishing red from green, or yellow from blue. Use the following techniques to help make your publications accessible to everyone:

  • 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.)
  • Use larger text and simple (not ornate) fonts.
  • Use a contrast checking tool (online or downloadable) to determine whether your color selections are legible by a wide range of users. We recommend the Colour Contrast Analyser by the Paciello Group.
  • If you are building a webpage, check it with a color blindness simulation tool. Avoid the following color combinations as they are difficult to read, especially for individuals with color vision deficiency:
    • Green and red (or related colors)
    • Blue and yellow (or related colors)
  • 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.

How do you know which colors will have enough contrast to be universally readable? One approach, of course, is to play it safe and stick to black and white, which are the default colors in applications like Microsoft Word. But color is an important—some would say essential—design element of slide presentations and the Web. So, which colors are best?

When text is placed against a solid color background, we recommend you use the Colour Contrast Analyser (CCA) by the Paciello Group to determine whether the contrast ratio passes the WCAG 2.0 standards. This free tool helps you “determine the legibility of text and the contrast of visual elements” using color contrast criteria established in the Web Content Accessibility Guidelines (WCAG) 2.0. The tool also simulates certain visual conditions, including dichromatic color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision. Use the CCA eyedropper tool to select foreground and background colors. The results display immediately below.

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

For this website, the CCA reports insufficient contrast between orange text and the white background. 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

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.