Using Color

Why is Color Important?

Color needs to be used effectively in documents and web pages. If color contrasts are too low, then most people will find it difficult to perceive and read, regardless of ability. Low color contrast ratios create barriers, especially for low-vision and colorblind people. Furthermore, when we design digital information that relies on color to convey meaning, then we risk leaving anyone with a visual disability out.

Color Contrast

Color contrast ratios exist on a spectrum where 1:1 is the lowest point and 21:1 is the highest point. Lower contrasts are more difficult to perceive than higher contrasts.

  • An example of 1:1 is white text on white, or black text on black.

  • An example of 21:1 is black text on white, or white text on black.

For normal text that is less than size 14pt, the minimum color contrast ratio between text color (foreground) and background color is 4.5:1. Better still are color combinations that create contrast ratios of at least 7:1.

Text that is size 14pt and bold, or 18pt and normal will pass with a minimum ratio of 3:1.

We recommend checking your color choices with a contrast analyzer tool like the WebAIM contrast Checker.

Non-text elements like borders and horizontal rules should also have a minimum color contrast ratio of 3:1.

Also, avoid layouts where text is overlaid on top of busy backgrounds like images and patterns. If you add a text layer on top of a background image, ensure the text is set in a solid-colored box to improve readability. For examples, check out this article from the Nielsen Norman Group.

    Techniques for Color Contrast

    Color and Meaning

    Color should not be the only way to perceive meaning. Colorblind, low-vision, and blind people can’t perceive color distinctions and need additional indicators for comprehension.

    Colors that are often associated with concepts like Red/Stop and Green/Go are often used to convey meaning. When desaturated (grayscale), different colors like red and green can appear as the same shade of gray.

    However, by including other indicators, all individuals can have the same understanding. For instance, in a form you might have instructions that state all red fields are required. By adding the word “Required” after the field name in red, you have color clues for sighted individuals and textual instructions for all individuals.

    If the color red is used to indicate a negative number, then a preceding minus sign should also be included. Bar charts with different colors can also include labels. Links that are presented in a different color than surrounding text can also be underlined.

      Techniques for Color Meaning