Color & Contrast

Estimated reading time: ( words)

Summary: Ensure a strong color contrast between foreground and background on every document, slide and web page. Always use color plus another visual indicator (for example, color plus boldface type or color plus size to communicate important information.

 

On this page:

 

Understanding just a little bit about color and contrast can help you communicate more effectively in your documents, web pages and presentations. This subject isn’t just for graphic designers and artists--color is one of the most powerful and often misused aspects of visual communication.

What you see may NOT be what others see 

Just because it looks one way to you when you design your documents and web pages doesn’t mean it will look that way to your audience. Users of adaptive technologies like screen magnifiers can change the way colors look on their personal display, for example, high contrast mode. Some users may be looking at your content while standing in bright sunlight. Some may have an older computer monitor with different color calibration settings. While you can never control (or know) what your users see, you can follow these two simple rules:

  1. Never use color alone to show emphasis
  2. Make sure your colors have strong contrasts between them

Never use color alone to show emphasis

Color should never be the sole means of conveying information. Always use color plus bold, color plus size, color plus patterns or shapes, or color plus halo (highlight) to show emphasis. This simple technique can help improve information access for people in a wide variety of contexts and conditions:

  • Color blindness
  • Low vision
  • Age-related vision issues such as macular degeneration
  • Monitors with incorrect or imperfect color rendering
  • People trying to read your materials on their phone while standing in broad daylight 

 

Techniques for text emphasis

Yes: 
I want to emphasize this point.
(uses boldface plus color difference)

No:
I want to emphasize this point.
(only uses color)

Techniques for graphic emphasis

For non-text graphics, color plus shape, color plus size, color plus texture or pattern, or some other means of visually distinguishing information differences. Here’s a chart where the areas are denoted just with color.

Here’s how that chart appears to someone with red-green color blindness:


If you design this chart with color and pattern, a person who can’t see color will still be able to interpret it. Here’s the same chart, corrected with an accessible design that includes color and pattern fill:

Color contrast checkers

Color contrast is measured as a ratio of brightness to darkness, the brightness of a color against the darkness of the color it appears on top of. WCAG 2.0 guidelines specify different contrast ratios depending on the size and weight of the font text, 3:1 for normal text less than 14 points, or 4.5:1 for 14-point bold or 18-point non-bold text. If you’re not sure whether your background and foreground colors have adequate contrast, you can compare the two colors using a color accessibility checker. You’ll need to know the hexadecimal value of the colors in order to perform this check.

This screenshot shows the webaim.org color contrast checker comparing two colors (pure blue text on pure white background) that conform to the WCAG 2.0 color contrast guidelines at all levels and text sizes, because the contrast ratio is greater than 7 to 1.

This screenshot shows the webaim.org color contrast checker comparing two colors (lavender text on pure white background) that fail the WCAG 2.0 color contrast guidelines at all levels and text sizes, becasue the contrast ratio is less than 3 to 1:

Color coding

If you color code your document (e.g., “things highlighted in blue are my responses to your questions”), a certain segment of your readers will have difficulty finding the new information. For example, screen readers don’t offer a way to search by color, and people with color blindness conditions won’t be able to see the difference either. Avoid color coding wherever possible, except where you pair the color with another cue: we recommend color plus bold over color plus underline (which looks like a hyperlink) or color plus italics (which can be difficult to read in large amounts).

Did you find what you were looking for?