Contrast Ratio Checker
Check the contrast ratio between foreground and background colors against WCAG 2.1 AA and AAA standards.
How to use the Contrast Ratio Checker
-
Pick a foreground (text) color and background color.
-
Read the contrast ratio and pass/fail results.
-
Adjust until you meet AA (4.5:1) or AAA (7:1).
What is color contrast, and why does it matter?
Color contrast measures the perceived luminance difference between foreground text and its background. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA). Insufficient contrast makes text unreadable for people with low vision, color blindness, or anyone in bright sunlight. This checker computes the relative luminance per the WCAG formula and shows pass/fail for normal text, large text, and graphical objects.
Key features
- Instant WCAG 2.1 contrast ratio calculation
- Pass/fail badges for AA and AAA at each text size
- Live color picker and hex input for both colors
- Sample text preview in the selected colors
Frequently asked questions
What contrast ratio do I need to meet WCAG AA?
4.5:1 for normal text (<18pt), 3:1 for large text (18pt+ bold or 24pt+ regular), and 3:1 for UI components and graphical objects.
Does this check non-text contrast?
Yes — it also reports compliance for UI components and graphical objects, which require 3:1 minimum per WCAG 2.1.
Are my color choices stored?
No. Everything runs locally in your browser.