Developer tools
Color Contrast Checker
Check WCAG contrast ratios for two colours locally in your browser.
Calculations stay local in your browser; no colour values are sent anywhere.
Check readable colour combinations against WCAG thresholds.
Enter foreground and background colours as hex, rgb(), or rgba(). The checker calculates the contrast ratio and shows AA and AAA results for normal and large text. Everything runs locally in your browser, so your colour values are never uploaded or stored.
Frequently Asked Questions
Everything you need to know about this tool, how it works, and privacy.
How does this color contrast checker calculate the ratio?
It converts each entered colour to relative luminance using the WCAG formula, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. A higher ratio means stronger visual contrast.
What is the difference between WCAG AA and AAA?
For normal text, AA requires a ratio of at least 4.5:1 and AAA requires 7:1. For large text, AA requires 3:1 and AAA requires 4.5:1. Check the WCAG guidance for the definition of large text and any requirements that apply to your content.
Which colour formats work, and what happens with invalid input?
Enter #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(), or rgba() values. RGB channels must be from 0 to 255 or 0% to 100%, and alpha must be from 0 to 1 or 0% to 100%; invalid input shows a clear error instead of a result.
Do my colour values stay private?
Yes. The contrast calculation runs entirely in your browser. CodeASystem does not upload or store the colours you enter.