Free WCAG Tool — No Signup Required

Color Contrast Checker

Enter a text color and background color — get the real WCAG contrast ratio and instant AA/AAA pass-fail for normal and large text.

The quick brown fox jumps over the lazy dog
—
Contrast Ratio
AA · Normal Text
—
AA · Large Text
—
AAA · Normal Text
—
AAA · Large Text
—

Want a free WCAG contrast reference guide (the exact thresholds, plus common failure fixes)? We'll email it to you.

How to Use the Contrast Checker

1

Enter Text Color

Use the color picker or type a hex value for your text color.

2

Enter Background

Set the background color the text will actually sit on.

3

Read the Ratio

The real WCAG contrast ratio updates instantly as you type.

4

Check Pass/Fail

See AA and AAA pass-fail for both normal and large text sizes.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG?
WCAG 2.1 AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA, the stricter level, requires 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio actually calculated?
WCAG defines it as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 the darker one. Relative luminance is computed from the linearized (gamma-corrected) sRGB channel values, weighted 0.2126 red, 0.7152 green, 0.0722 blue.
Is passing WCAG a legal requirement?
In many jurisdictions, yes for certain types of sites — accessibility laws (like the ADA in the US, or the EN 301 549 standard in the EU) commonly reference WCAG 2.1 AA as the practical compliance benchmark, especially for government and larger commercial sites. Requirements vary by jurisdiction and site type, so check what applies to your specific case.

Ready-Made Templates Built to Pass Contrast

UIXDraft's 180+ HTML/CSS templates use color combinations already checked for real readability — not just what looked good in a mockup.

Get 180+ Templates
Commercial license · Instant download · One payment · No subscription