Color & Design

Contrast Checker

Check the contrast ratio between a text color and background color against WCAG AA and AAA accessibility standards. See a live preview and get suggestions if it fails.

Aa
Text color
#
Aa
Background color
#
Contrast ratio
—
—
✕
AA Normal
Regular text ≥ 4.5:1
Fail
✕
AA Large
Large text ≥ 3:1
Fail
✕
AAA Normal
Regular text ≥ 7:1
Fail
✕
AAA Large
Large text ≥ 4.5:1
Fail
Live preview
Normal text
The quick brown fox
Jumped over the lazy dog. This is what your text will look like at a normal reading size on this background color.
Small caption text is harder to read at low contrast.
Inverted
The quick brown fox
This shows the background as text color and vice versa, useful for checking button states and UI components.
Small caption text is harder to read at low contrast.
Suggested accessible alternatives
—