Free WCAG Contrast Checker Online
Check foreground/background color contrast ratios against WCAG 2.1 AA and AAA accessibility standards — instantly.
Normal text — The quick brown fox jumps over the lazy dog.
Large text (24px bold)
—How it works
Pick foreground color
Choose the text color using the color picker or enter a HEX value.
Pick background color
Choose the background color the text will appear on.
See contrast ratio
The WCAG 2.1 contrast ratio is calculated instantly using the relative luminance formula.
Check compliance
See pass/fail badges for AA (4.5:1) and AAA (7:1) for both normal and large text.
Common use cases
Design system compliance
Verify that all text/background combinations in your design system meet WCAG AA or AAA requirements before building.
Accessibility audits
Check color pairs from a live site against WCAG standards as part of a formal accessibility audit.
CTA button design
Test button text against button background colors — CTAs are often the worst offenders for contrast failures.
Dark mode verification
Verify that your dark mode palette maintains sufficient contrast ratios — light themes often pass while dark variants fail.
Frequently asked questions
What is the WCAG contrast ratio?
It's the ratio of relative luminance between the lighter and darker color, from 1:1 (no contrast) to 21:1 (black on white). WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text.
What counts as "large text"?
WCAG defines large text as 18pt (24px) or larger in normal weight, or 14pt (approximately 18.5px) or larger in bold.
What is the difference between AA and AAA?
AA (4.5:1) is the minimum legal/standard requirement. AAA (7:1) is enhanced accessibility for users with severe visual impairments. Most projects target AA.
Is this calculation exact?
Yes — the tool uses the exact WCAG 2.1 relative luminance formula (with linearization for sRGB values) as specified in the spec.