Color Contrast Checker
/color-contrast-checkerCheck the contrast ratio between two colors against WCAG AA and AAA guidelines for text of any size.
Low-contrast text is the most common accessibility failure on the web — and the easiest to catch early. This checker computes the contrast ratio between any two colors and grades it against WCAG AA and AAA thresholds. You can check large text, normal text, and UI components. The math runs locally with instant results.
- 01Upload
- 02Configure
- 03Run
- 04Download
Loading tool...
FAQ
Frequently asked questions
Everything you need to know about color contrast checker.
What do the WCAG levels mean?
AA requires a ratio of 4.5 to 1 for normal text and 3 to 1 for large text, while AAA requires 7 to 1 and 4.5 to 1 respectively.
How is the contrast ratio calculated?
The ratio compares the relative luminance of the foreground and background colors using the WCAG formula, producing a value such as 4.5 to 1.
Does it check large text separately?
Yes. You can indicate whether the text is large, which lowers the required ratio thresholds under both AA and AAA guidelines.
Can it suggest better colors?
Yes. When a pair fails, the tool shows which level it misses and can suggest adjustments that bring the pair within compliance.
Is my color data sent anywhere?
No. All contrast calculations run locally in your browser, so your brand colors stay on your device.
What is relative luminance?
Luminance weights each RGB channel with a formula that reflects how bright a color appears to human eyes. The contrast ratio is the relationship between two colors' luminance values.
Related tools
same category · same privacy