All Tools / Developer Tools / WCAG Contrast Checker
WCAG Contrast Checker
Check foreground and background color combinations for readability standards across normal and large text.
Foreground
Background
Large text preview 18px+ with your selected pair.
Results
Contrast Ratio: 14.86:1
How to Check WCAG Color Contrast
01
Choose Text Color
Enter or select the foreground color used for your text.
02
Choose Background
Set the background color behind the text or interface element.
03
Review Accessibility
Check the contrast ratio and WCAG AA or AAA results.
Relative Luminance and WCAG Ratios
The checker converts sRGB colors to relative luminance and compares the two values using the WCAG contrast ratio formula.
All color calculations run locally, so your palette and design details remain in the browser.
Frequently Asked Questions
What contrast ratio should normal text meet?
WCAG AA generally requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.
What do AA and AAA mean?
They are WCAG conformance levels. AAA is the stricter target and may require stronger contrast.
Does the tool check large text?
Yes. Results distinguish normal and large text thresholds so you can assess both cases.
Are colors sent to a server?
No. The ratio and pass or fail results are calculated entirely in your browser.
Related Daily Utilities