Contrast Checker is now live on Tools.Town — a WCAG accessibility tool that calculates the contrast ratio between any two colors and tells you instantly whether your text passes Level AA or AAA standards.
Pick your foreground and background colors, see the ratio, and know whether your design is accessible before you ship.
What Does It Do?
WCAG AA Check
Tests against the 4.5:1 (normal text) and 3:1 (large text) thresholds required by WCAG 2.1 Level AA.
WCAG AAA Check
Tests against the stricter 7:1 (normal) and 4.5:1 (large) thresholds for the highest accessibility standard.
Live Preview
See a live text-on-background preview as you adjust colors — shows normal and large text simultaneously.
WCAG 2.1 Level AA is the legal minimum for most accessibility regulations worldwide, including ADA (US), EN 301 549 (EU), and WCAG compliance requirements.
How It Works
Enter colors
Pick a foreground color (your text) and a background color using the color inputs or by typing a HEX value.
See the ratio
The contrast ratio is calculated instantly and displayed as a number like 4.52:1.
Check pass/fail
Green checkmarks or red crosses show whether you pass AA and AAA for both normal and large text.
Why We Built It
Inaccessible color contrast is one of the most common accessibility failures on the web, and it’s entirely preventable. Most design tools show colors in isolation — you have to remember to check contrast separately. Contrast Checker makes that check instant and automatic, removing any excuse to skip it during design review.
Try It Now
Contrast Checker
Calculate WCAG color contrast ratios. Instant AA and AAA pass/fail for normal and large text.
Use the Contrast Checker alongside the Color Palette Generator to build accessible brand palettes from the start.
Related Posts
Frequently Asked Questions
What contrast ratio do I need to pass WCAG AA?
What's the difference between AA and AAA?
What does 'large text' mean in WCAG?
Explore more on Tools.Town Blog
Finance guides, tool launches, and engineering stories — updated weekly.