Developer Utility
Color Contrast Checker — WCAG AA/AAA Accessibility
Pick or enter any two colors to instantly calculate their contrast ratio. See pass/fail results for WCAG AA and AAA at normal and large text sizes. Adjust lightness with sliders until you find an accessible combination. All processing in your browser.
WCAG contrast checkeraccessibility color checkercolor contrast ratioAA AAA contrast testaccessible color pickerweb accessibility tool
Your Product
URL: https://example.com
Audience: your target audience
Ready to use — open the tool and start generating.
Notes: No additional notes provided.
How to use it
Turn the output into a validation asset.
1
Pick foreground and background colors using the color picker or enter hex codes.
2
View the contrast ratio and WCAG pass/fail results.
3
Adjust colors with the sliders until both AA and AAA pass.
4
Copy the accessible hex codes to your stylesheet.
Related tools