WCAG Color Contrast Checker
Check text/background color contrast against WCAG AA and AAA accessibility standards. Free to use, no signup required for occasional use.
Contrast ratio: 18.88:1
- ✓ Pass — AA — Normal text (4.5:1)
- ✓ Pass — AA — Large text (3:1)
- ✓ Pass — AAA — Normal text (7:1)
- ✓ Pass — AAA — Large text (4.5:1)
What is the Color Contrast Checker?
The Color Contrast Checker calculates the contrast ratio between a text color and a background color, and evaluates it against the Web Content Accessibility Guidelines (WCAG) 2.x thresholds for AA and AAA compliance, for both normal and large text. Sufficient color contrast is essential for readability, especially for users with low vision or color blindness, and is a common requirement in accessibility audits and legal compliance standards. This tool computes relative luminance for each color and derives the standard WCAG contrast ratio formula, showing a clear pass/fail result for each threshold along with a live text preview.
How to use it
Enter or pick your text color and background color using the color pickers or hex input fields. The tool instantly calculates the contrast ratio and shows a live preview of sample text using those colors. Below the preview, check the pass/fail status for WCAG AA and AAA at both normal text (4.5:1 and 7:1 respectively) and large text (3:1 and 4.5:1) thresholds.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and larger).
What about WCAG AAA?
WCAG AAA is stricter, requiring at least 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
It uses the relative luminance of each color per the WCAG formula, then compares the lighter and darker luminance values.
Does this check color blindness accessibility specifically?
This tool checks luminance contrast per WCAG, which improves readability broadly but doesn't replace dedicated color-blindness simulation testing.