Contrast is the difference between the lightness and darkness of two colors. Good color contrast makes content accessible by making text and controls easier to see and read.
Accessible contrast benefits people who have various types of colorblindness, have low vision, are neurodivergent, or are viewing content in different lighting conditions.
In digital design, the contrast between two color values can be calculated mathematically as a contrast ratio. Digital accessibility standards define the required minimum value for contrast in Success Criterion 1.4.3 Contrast (Minimum).
Best Practices
When selecting text and background, choose a dark text on light background, or light text on dark background. Neutral colors, including dark grays and off-whites, are good choices and can be less harsh than white on black.
Avoid text and background that are both strong colors, such as a bright blue and bright yellow. These color combinations usually have low contrast between them because neither is very dark or light.
Plan your design with accessible color combinations.
- Use color tools to identify good combinations from your palette
- Refer to U-M's Brand and Visual Identity page on color for good practices and combinations
Check Color Contrast
When reviewing existing content, visually scan text and controls for low contrast. Any combinations that look low contrast should probably be improved.
To check the contrast value between two colors, use a color contrast checker. The checker will calculate the value and tell you if the combination passes or fails.
- WebAIM Color Contrast Checker web-based checker
- TPGI Color Contrast Analyzer desktop checker (available in MiWorkspace)
- ColorZilla browser extension
Examples
The examples below show good and bad contrast.
This is good color contrast
This is good contrast too
This is bad color contrast
This is also bad contrast
Note that there are different contrast requirements for different size 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. (More on font size and contrast from W3C.)
Some color combinations technically pass contrast requirements, but are still difficult to see or read for many people. Avoid combinations that look low contrast to you or your users. The examples below include combinations that pass the requirements but may be difficult (such as sample 4 and others).
- Sample 9.04:1
- Sample 18.06:1
- Sample 14.04:1
- Sample 6.03:1
- Sample 21:1
- Sample 2.67:1 (fail)
- Sample 1.1:1 (fail)
- Sample 2.09:1 (fail)
- Sample 21:1
- Sample 1.14:1 (fail)