Contrast Checker

9 tools

Check WCAG contrast ratio between two colors.

100% client-side — nothing you process is ever uploaded

Pick a color and get an instant palette, extract dominant colors from a photo, mix two colors, build gradients, check WCAG contrast, simulate color blindness, or browse a reference of named and Tailwind-style colors — all computed locally as you adjust each control.

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.