Color Contrast Checker
Check WCAG AA/AAA contrast ratio between a foreground and background color.
Enter a foreground and background color to see their exact contrast ratio and whether it passes WCAG AA or AAA accessibility thresholds, for both normal and large text. Essential for confirming that body copy, buttons, and links stay legible for users with low vision before you ship a design. The calculation runs locally against the WCAG 2.1 relative luminance formula, with an instant preview of the two colors together.
Loading tool
Details
- Category
- Developer & data
- Runs
- In your browser
- Files uploaded
- No
- Cost per run
- Free
- Sign-in
- Not required
- Works offline
- Yes, once loaded
Last updated 2026-08-03
Common questions
What's the difference between AA and AAA?
AA is the standard minimum accessibility level; AAA is a stricter, enhanced level.
What counts as 'large text'?
18pt (24px) regular or 14pt (18.6px) bold and larger.
What ratio do I need to pass AA for normal text?
At least 4.5:1 for normal text and 3:1 for large text under WCAG AA.
Does this check color blindness accessibility?
No - this checks luminance contrast ratio only, which is the WCAG standard. It doesn't simulate specific color vision deficiencies.