WCAG Color Contrast Checker
Design & GraphicsVerify text and background color combinations against WCAG 2.1 AA and AAA accessibility contrast standards.
Color Pair Selectors
WCAG Contrast Ratio
3.68 : 1
Normal Body Text (<18pt)
WCAG AA (4.5:1) FAIL
WCAG AAA (7.0:1) FAIL
Large Text / Headings (18pt+)
WCAG AA (3.0:1) PASS
WCAG AAA (4.5:1) FAIL
UI Controls & Graphics
WCAG AA (3.0:1) PASS
Icons, borders, input controls
Live Visual Simulation
Quick Brown Fox Jumps Over The Lazy Dog
Good contrast makes reading effortless for all users, including those with visual impairments or color blindness. Test your palette before shipping to production.
How to Use WCAG Color Contrast Checker
1
Select Color Pair
Pick foreground text and background colors via picker or HEX.
2
Inspect WCAG Ratio
Review pass/fail badges for normal text, large text, and UI controls.
3
Simulate Live
Test visual readability directly inside the interactive preview card.
Privacy Guarantee:All computations, transformations, and file processing occur 100% locally in your browser via client-side JavaScript. Your sensitive data is never uploaded or logged on any remote server.