Color contrast

the words "weak contrast hides information" in light blue on a slightly darker blue background
the words "strong contrast makes content legible" in dark text on off-white background

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)

Recommended tools