Contrast Checker
Check foreground/background color contrast ratios. Verify WCAG AA and AAA accessibility compliance.
Normal text sample — The quick brown fox jumps over the lazy dog.
Large text sample (18px+)
Contrast Ratio21.00:1
WCAG AANormal Text (≥4.5:1)✓ Pass
WCAG AALarge Text (≥3:1)✓ Pass
WCAG AAANormal Text (≥7:1)✓ Pass
WCAG AAALarge Text (≥4.5:1)✓ Pass
How to Use
- Set your foreground color (text color) using the color picker or by typing a HEX code. Then set the background color the same way.
- The live preview shows how sample text appears with your chosen colors. The contrast ratio is calculated automatically using the WCAG relative luminance formula.
- Review the WCAG AA and AAA pass/fail results for both normal text (body copy) and large text (18px+ or bold 14px+). Aim for at least AA compliance for all user-facing interfaces.
Frequently Asked Questions
- What is WCAG?
- WCAG stands for Web Content Accessibility Guidelines. These internationally recognized standards specify minimum contrast ratios to ensure text is readable by people with low vision or color blindness.
- What contrast ratio do I need to pass WCAG AA?
- For normal text (under 18px / 14px bold), you need a minimum ratio of 4.5:1. For large text (18px+ or 14px+ bold), the minimum is 3:1.
- What is the difference between AA and AAA?
- AA is the legally required standard for most accessibility laws. AAA is the enhanced level — it requires 7:1 for normal text and 4.5:1 for large text, making content accessible to users with more severe vision impairments.
- How is contrast ratio calculated?
- Contrast ratio is calculated using the relative luminance of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Luminance accounts for the non-linear response of human vision.