Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA thresholds. Instant results — everything runs in your browser.
Large Text Aa Bb Cc
Normal text — the quick brown fox jumps over the lazy dog. Contrast is critical for readability.
WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios for text and UI components. These ensure content is readable for people with low vision or color deficiencies.
- AA Normal text — 4.5:1 minimum
- AA Large text — 3:1 minimum (≥18pt or ≥14pt bold)
- AA UI components — 3:1 minimum (borders, icons)
- AAA Normal text — 7:1 (enhanced accessibility)
- AAA Large text — 4.5:1 (enhanced accessibility)
How Contrast is Calculated
WCAG contrast ratio uses relative luminance — a measure of how much light a color emits relative to white. Each RGB channel is linearized using a gamma curve, then weighted by perceptual sensitivity (R: 21.26%, G: 71.52%, B: 7.22%).
The ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. Ratios range from 1:1 (identical) to 21:1 (pure black on pure white).
Tips for Good Contrast
- Aim for at least 4.5:1 for all body text
- Dark mode needs separate contrast checks — inverting colors doesn't guarantee compliance
- Use the Color Hex Converter to explore hues while maintaining contrast
- Placeholder text is often exempt — but still aim for 3:1
- Decorative images and disabled elements are exempt from WCAG contrast requirements
Frequently Asked Questions
What counts as "large text" in WCAG?
Large text is 18pt (24px) or larger, or 14pt (approximately 18.67px) when bold. Large text has a lower contrast requirement (3:1 AA) because it's more readable at lower contrast.
Do I need AAA compliance?
WCAG AA is the standard legal and accessibility requirement in most jurisdictions. AAA is an enhanced level — recommended for critical text like medical or legal content, but not required for general compliance.
Does contrast ratio account for color blindness?
Contrast ratio measures luminance difference, not color difference — so it does help with many forms of color blindness (which affect hue perception, not lightness). However, passing contrast ratio doesn't guarantee full color-blind accessibility; avoid relying on color alone to convey information.
What about semi-transparent colors?
This tool requires opaque hex colors. For semi-transparent text, calculate the effective color by blending the foreground with the background at the given opacity, then check that solid color against the background.