What is Contrast Checker?

Check WCAG contrast ratios for accessibility compliance.

Is Contrast Checker free?

Yes. Free, no signup, no ads, no data collection. Runs entirely in your browser.

Does Contrast Checker upload my data?

No. All processing happens client-side in your browser. Nothing is uploaded to a server.

Who built Contrast Checker?

Kesava (https://iamkesava.com), part of the Kami Studios little tools collection at https://tools.iamkesava.com.

What is Contrast Checker?

Check WCAG contrast ratios for accessibility compliance.

Is Contrast Checker free?

Yes. Free, no signup, no ads, no data collection. Runs entirely in your browser.

Does Contrast Checker upload my data?

No. All processing happens client-side in your browser. Nothing is uploaded to a server.

Who built Contrast Checker?

Kesava (https://iamkesava.com), part of the Kami Studios little tools collection at https://tools.iamkesava.com.

What WCAG levels does the contrast checker test?

WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text). It shows pass/fail for both levels simultaneously.

Can I test text on a semi-transparent background?

Yes. Set the alpha channel on either color to simulate layered UI transparency, and the checker calculates the blended contrast ratio.

Does it work for UI components and icons, not just text?

WCAG 3:1 applies to non-text elements like icons and input borders. The checker flags component-level contrast separately from text.

Can I simulate color blindness?

Yes. Toggle deuteranopia, protanopia, and tritanopia simulations to see how your color pair looks to colorblind users.

Contrast Checker

WCAG AA / AAA · live preview · suggested fixes

The quick brown fox jumps over the lazy dog.

Sample at 18px regular · #1e293b on #ffffff

14.63:1

Contrast ratio

✓ Normal AAA✓ Large AAA✓ UI AA

About this tool

What WCAG levels does the contrast checker test?: WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text). It shows pass/fail for both levels simultaneously.
Can I test text on a semi-transparent background?: Yes. Set the alpha channel on either color to simulate layered UI transparency, and the checker calculates the blended contrast ratio.
Does it work for UI components and icons, not just text?: WCAG 3:1 applies to non-text elements like icons and input borders. The checker flags component-level contrast separately from text.
Can I simulate color blindness?: Yes. Toggle deuteranopia, protanopia, and tritanopia simulations to see how your color pair looks to colorblind users.

About

Pick a foreground and background color. We compute the WCAG contrast ratio and tell you whether it passes AA / AAA for body text, large text, and UI components. When it fails, we suggest the nearest accessible color.

Made for

Designers, accessibility engineers, front-end devs.

Reach for it when