Color contrast

“Pretty good” is not good enough.

BEFORE: TEE Center graphic with insufficient contrast
AFTER: TEE Center graphic, edited for contrast

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)

Who’s affected: People with low vision or color deficiencies

WCAG standard: Guideline 1.4.1 Contrast (minimum)

What to do: Elements in the Forty-two design system will have accessible levels of color contrast in their default state.  If you change the foreground (text) or background color of an element, make sure the color contrast is 4.5:1 or greater. (There are some exceptions and variance around logos, decorative elements and large text. Check with C&M if you’re unsure)

Suggested tool: University of Michigan brand color palette color contrast chart, WebAIM color contrast checker (see our How To: post) Stark extension for Chrome.