Color Tools

Color Contrast Checker

Check WCAG contrast ratios between foreground and background colors for accessibility compliance.

The quick brown fox jumps over the lazy dog.
24px Large text 18px Bold text 16px Normal 14px Small 12px Tiny
17.26:1

How to use this tool

  1. Set your text color in the Foreground (Text) field — type a hex value like #E9E6DD or pick one with the color swatch.
  2. Set the Background color the same way using its hex field or swatch.
  3. Drag the Lightness sliders to fine-tune either color without changing its hue — the ratio updates live.
  4. Read the Contrast Ratio panel (e.g. 17.26:1) and check how the text looks in the Preview.
  5. Scroll to WCAG Compliance to see which levels pass: AA Normal, AA Large, AAA Normal, and AAA Large.

Why this tool is helpful

Meet WCAG AA & AAA

See at a glance whether a pair passes each threshold — 4.5:1 for AA normal text, 3:1 for AA large text, and 7:1 / 4.5:1 for AAA.

Build accessible palettes

Design text-on-background combinations that are readable from the start instead of fixing failures after an audit.

Tune shades without guesswork

The Lightness sliders keep hue and saturation fixed so you can nudge a color until it clears the ratio you need.

Check the right text size

WCAG has different limits for "large" text. The preview shows samples from 24px large down to 12px tiny, so you test against what actually ships.

Audit existing UI

Paste your current brand or theme colors to verify they hold up on both light and dark surfaces before a release.

Stay private

Everything runs locally in your browser. Nothing is uploaded, logged, or sent to a server.

FAQ

What does the contrast ratio number mean?

It's the ratio of the lighter color's luminance to the darker color's, computed as (L1 + 0.05) / (L2 + 0.05). It ranges from 1:1 (identical) to 21:1 (black vs white).

What ratio do I need to pass WCAG?

For AA: 4.5:1 for normal text and 3:1 for large text. For AAA: 7:1 for normal text and 4.5:1 for large text.

What counts as "large text"?

Per WCAG 2.1, text at least 18pt (24px) or at least 14pt (~18.66px) and bold. The lighter thresholds apply to that size.

Does the order of the two colors matter?

No. The ratio is symmetric — it compares the lighter against the darker color, so swapping foreground and background gives the same result.

Which hex formats are accepted?

Both #RRGGBB and 3-digit shorthand like #fff work, with or without the leading #. Invalid values simply won't produce a meaningful ratio.

Does it use the official WCAG formula?

Yes. It converts each channel with the WCAG relative-luminance formula (the sRGB gamma curve) and computes the standard contrast ratio from those values.

Does any of my data leave my browser?

Never. All calculation happens locally in JavaScript. Your colors are not sent to, stored on, or logged by any server.