Color Contrast Checker

Check color contrast ratios for WCAG AA/AAA compliance with instant previews, fix suggestions, and shareable checks.

WCAG AA: 4.5:1 (normal text) and 3:1 (large text). WCAG AAA: 7:1 (normal text) and 4.5:1 (large text). Large text is 18pt+ (24px) or 14pt+ bold.

Foreground (text) color

Background color

Live preview

Includes normal and large text samples
Text on background

Sample text (normal)

Sample text (large)

Sample text (bold large)

Background on text

Sample text (normal)

Sample text (large)

Sample text (bold large)

Contrast ratio & WCAG

What do AA and AAA mean?

AA is the minimum contrast requirement for most text (4.5:1 for normal text, 3:1 for large).

AAA is enhanced accessibility (7:1 for normal text, 4.5:1 for large).

Large text means 18pt (24px) or larger, or 14pt (18.66px) bold.

Contrast ratio
—
Adjust colors to see results.

WCAG AA

Normal text (≥4.5:1) —
Large text (≥3:1) —

WCAG AAA

Normal text (≥7:1) —
Large text (≥4.5:1) —

Recently checked

No recent color pairs yet.

Use Cases

Common ways developers and designers use a contrast checker.

  • Verify button text contrast

    Quickly confirm your button labels are readable and meet WCAG requirements.

  • Fix a failing combination

    Adjust lightness and apply suggestions to reach AA/AAA while staying close to your original color.

  • Audit design system colors

    Check common pairs in your design system and document which ones pass AA/AAA for different text sizes.

  • Compare brand background options

    Compare brand backgrounds against black/white text to choose the most readable option.

  • Validate large text compliance

    See when a pair is acceptable for large text even if it fails normal text.

Color Contrast Checker FAQ

How do I use the color contrast checker?
Enter or pick a text color and a background color, review the live contrast ratio and AA/AAA results, and use the sliders or suggestions if the pair fails. Use Reset to return to the default black-on-white example.
Is this color contrast checker free to use?
Yes. The app is free to use and does not require an account.
Does the checker save or share my colors?
The checker runs in your browser. Recent pairs are stored only in this browser's local storage so you can reopen them, and the current pair is also written into the page URL so you can share the result. Standard site analytics may still load on production pages.
Why am I getting an invalid color error or an unexpected result?
Check that each value is valid HEX, RGB, or HSL. If a pair still fails, use Reset, Random accessible pair, or the suggestion buttons to find a passing alternative.
Where can I find WCAG guidance and keyboard shortcuts?
Use the in-app Help panel. It explains accepted formats, AA/AAA thresholds, shortcuts, local history behavior, and Escape-based dialog closing.