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
     

Example of a low-contrast image:

low contrast image
 

Example of a high-contrast image:

high contrast image
 

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).

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.
 

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
Color best practices image

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.

If you design a chart with color and pattern, a person who can’t see color will still be able to interpret it.

 

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.

Online Color Contrast Checker:

Images: Visheck - analyze contrast ratios of your images

Pages: WAVE - analyze contrast ratios for all page elements at once