Contrast Checker

9 tools

Check WCAG contrast ratio between two colors.

Runs in your browser — your files and text stay on your device

Check the contrast ratio between a text color and its background against the WCAG accessibility thresholds. Normal text needs at least 4.5:1 and large text at least 3:1 for level AA. Adjust the lightness of a color until it passes, keeping the hue so your brand color stays recognizable.

Picker & Palette Shade Scale Palette from Image Color Mixer Gradient Generator Contrast Checker Color Blindness Named Colors Palette Reference

Foreground (text)Background

Sample text

18.88:1

AA Normal Text

Pass

AA Large Text

Pass

AAA Normal Text

Pass

How to use this tool

1Pick a foreground (text) color and a background color.
2The contrast ratio is calculated below the sample preview.
3Check the pass/fail badges for WCAG AA and AAA thresholds.

Frequently asked questions

What do AA and AAA mean?

WCAG accessibility conformance levels. AA is the commonly required standard (4.5:1 normal text, 3:1 large text); AAA is stricter (7:1 normal text).

How is the ratio calculated?

The WCAG formula: (lighter luminance + 0.05) / (darker luminance + 0.05), where luminance is derived from each color's RGB values.

Guides

All guides →