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.
Text
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:
| 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 |
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:
- Desktop app: Color Contrast Analyser (Mac & Windows; also available through MiWorkspace)
- Browser extension: ColorZilla (ColorZilla for Chrome | ColorZilla for Firefox).
- 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.