Color Contrast

Check all the color contrast combos!

Color Contrast Requirements

Color Contrast failures are common. The earlier we can intercept potential contrast issues, the better. Ideally we'd work in the design phase to ensure color combinations meet contrast requirements.

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 for Accessible Color Design

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.

Tools for Color Contrast Testing

Color Contrast Analyzer | Chrome Plugin

Experiencing Site from Various Colorblind Conditions

Chrome Plugin: