Contrast checks
Preview the brand roles together and check text and button contrast against the WCAG grades.
Color Lab works out WCAG contrast ratios from the hex values. It shows them in two places: on every swatch, and in the brand preview.
Contrast on each swatch #
The bottom of each card shows the color's contrast on white and on black, as a ratio like 4.6:1. The hex on the big swatch is written in black or white, whichever reads better.
The brand preview #
When any color has a role, a preview appears above the swatches. It's a sample card using the background, surface and text colors, with Primary and Accent buttons. Each button's label is black or white, whichever reads better on it.
The contrast checks #
Next to the preview, the tool checks the pairs that matter for a brand:
- Text on background
- Text on surface
- Button text on primary
- Button text on accent
A check is skipped when one of its roles has no color. Each check shows its ratio and a grade:
- AAA: 7:1 or more.
- AA: 4.5:1 or more.
- AA large: 3:1 or more, which passes for large text only.
- fails: below 3:1.