Color Contrast

Colors that sit next to one another must have sufficient contrast as defined by WCAG 2.1 AA rules.

Why is This an Issue?

People with low vision can have difficulty distinguishing information when colors that sit side-by-side have too little contrast. Most of the time this happens between some text and the background it rests against.


Examples of Good and Bad Color Contrast

This is good color contrast

This is good contrast too

This is bad color contrast

This is also bad contrast

When you are choosing colors for your page or document, make sure to provide high color contrast between the background and foreground. A rule of thumb is that if the contrast appears poor, then it probably does not meet the requirement.

Proper Contrast for Text

U-M must conform to the WCAG 2.1 success criteria 1.4.3 (AA), which for text requires the following contrast ratios:

Required Color Contrast Ratios for Text
Text Size Definition Minimum Contrast
Regular text Less than 18 points (24 pixels*) non-bolded, or less than 14 points (18 pixels) bolded 4.5:1
Large text 18 points (24 pixels*) or larger non-bolded, or 14 points (18 pixels) or larger bolded 3:1

* The difference between points and pixels:
Points are used by a few programs, such as MS Word and those intended for the print medium, as their unit of measurement.
Pixels are used by most web-based technologies, including Google Suite and the web. 1pt = 1.333px; therefore 14pt and 18pt are equal to about 18.5px and 24px. (source)

How to Determine Contrast Ratio

There are a few tools that will help you:

  • The WebAIM Contrast Checker will tell you whether your color combination meets the AA standard. Caveat: you need to know the hexadecimal (hex) or RGB values for the colors you're looking to test.
  • If you can't find the hex or RGB values, or if you're evaluating an off-line document, you can use an eyedropper tool like: 
  • WebAIM has a list of other contrast evaluation tools.
  • To choose compliant color combinations more easily, there are many accessible color scheme generators such as Color Safe.

Choosing Colors

In general, use dark text on a light background or light text on a dark background. The contrast of pure white on pure black can be harsh for some users, so if you want to use white and black, go for an off-white and an off-black.

U-M's Brand and Visual Identity page on color recommends some color practices that may be helpful.