Issue
A combination of foreground and background colors that’s difficult to read because of a lack of contrast (ie. light gray text on white background)
What to do
If you change the foreground (text) or background color of an element, make sure the color contrast is 4.5:1 or greater.
Note if you’re using the Michigan Engineering Forty-Two theme: Elements in the Forty-Two design system will have accessible levels of color contrast in their default state. (There are some exceptions and variance around logos, decorative elements and large text. Check with C&M if you’re unsure)
Recommended tools
- University of Michigan brand color palette color contrast chart
- TGPi Colour Contrast Analyzer (also available through U-M managed software)
- WebAIM color contrast checker (see our How To: post)
- Also see: How to: Color contrast checker
Who’s affected
People with:
- Low vision or color deficiencies