Contrast

Summary

Make sure foreground and background colors and other visual indicators contrast each other.

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.


Impact

Impact

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 by for example, enabling 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. 
Dos and Don'ts

Dos and Don'ts

Both RGB and CMYK are modes for mixing color in graphic design. As a quick reference, the RGB (Red, Green and Blue) color mode is best for digital work, while CMYK (Cyan, Magenta, Yellow, Black) is used for printed materials.

While you can never control (or know) what your users see, you can follow these simple rules.

Expand all

Use Color with Another Cue to Show Emphasis or Differences

Color should never be the sole means of conveying information. 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. Screen readers don’t offer a way to search by color, and people in or with a wide variety of conditions and in certain environments won’t be able to see the difference either.

This includes people who:

  • Are color blind
  • Have low vision
  • Have age-related vision issues such as macular degeneration
  • Use monitors with incorrect or imperfect color rendering
  • Are trying to read your materials on their phone while standing in broad daylight

Do

Use color plus another element to emphasize a point or visually distinguish information differences:

  • Bold
  • Size
  • Patterns or shapes
  • Halo (highlights)

 

Don't

Don't use color alone to emphasize a point or show information differences.

Don't use color plus underline to show emphasis (it looks like a hyperlink).

Don't use color plus italics to show emphasis (it is difficult to read in large amounts).

Use Colors that Strongly Contrast Each Other

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.1 guidelines specify different contrast ratios depending on the size and weight of the font text, such as:

  • 3:1 for large text (14-point or larger bold or 18-point or larger non-bold) and graphics and user interface components
  • 4.5:1 for normal text (less than 14 points)

Do

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, such as the webaim.org color contrast checker. You’ll need to know the hexadecimal value of the colors in order to perform this check.

Don't

Don't use background and foreground colors that don't pass WCAG 2.0 guidelines.

How-to