Check WCAG 2.1 color contrast ratios instantly. Pick any foreground and background color, see the contrast ratio, AA/AAA accessibility levels, and a live text preview—all in your browser. Free, private, no signup.
Theme Contrast Checker is a free, privacy-first tool for verifying WCAG 2.1 color contrast compliance. Pick any two colors and instantly see whether your combination passes AA or AAA accessibility standards—with a live text preview so you can judge readability yourself.
Enter a foreground and background color to get:
Results update in real time as you type hex values or use the color picker.
Don't just trust a number—see it. The live preview panel renders your chosen colors with:
Judge readability at every size before shipping.
The contrast calculation follows the exact W3C specification:
c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4)0.2126 * R + 0.7152 * G + 0.0722 * B(L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colorNo approximations. No shortcuts. The same math used by browser DevTools and professional audit tools.
| Level | Normal Text | Large Text | |-------|------------|------------| | AA | ≥ 4.5:1 | ≥ 3:1 | | AAA | ≥ 7:1 | ≥ 4.5:1 |
Large text is defined as 18pt (24px) regular or 14pt (18.66px) bold.
All calculations run 100% client-side in your browser. No data is sent to any server. No cookies, no tracking, no analytics on your color choices. Works offline once loaded.
color and background-color declarations on your clipboardThe client needed a robust developer tools solution that could scale with their growing user base while maintaining a seamless user experience across all devices.
We built a modern application using Accessibility and WCAG, focusing on performance, accessibility, and a delightful user experience.
Category
Developer Tools
Technologies
Date
February 2025
More work in Developer Tools