Contrast

Users with low vision or color blindness rely on adequate color contrast to understand content.

Good contrast is especially important on mobile, given conditions of being outdoors under bright sunlight, and also being on a small(er) screen.

Ratios

  • 4.5:1 ratio is the minimum.

  • 3:1 ratio is acceptable if it is "large" text

  • On mobile, a ratio of 7:1 (or 4.5:1 for large text) would be hitting it out of the park.

Large Text is considered for fonts at least 18pt or 14 pt bold.

Tools

Listed are a couple of color contrast tools, one that is browser-based, and the other as a plug-in for Sketch:

Generate a compliant color palette for a style guide by selecting:

  • Background or Foreground Color

  • Font Weight & Size

SET YOUR BASELINE COLOR & FONT

Select the Background Color, Font Family, Size, Weight, and WCAG Standard.

"PLUG & PLAY" TO FIND A COMPLIANT COMBINATION

The Blue Background is selected, and the available foreground colors are presented. The ratio score is presented in the top right.

Allows for review of color contrast directly within a Sketch project. Upcoming feature provides suggested colors that would meet conformance. (Like Colorsafe.co, above)

USING THE TOOL

Select two neighboring color elements and a ratio will be calculated for you. With a calculation of 4.69:1, a checkmark shows it passes AA standard 4.5:1, which is acceptable. As for the "X", denoting failure at the AAA level, it is for the edge and special cases when a contract requires AAA conformance. Otherwise, this can be ignored.

UPCOMING FEATURE

Set either a foreground or background color, and the tool provides recommendations for compliant combinations.