Color Contrast Checker
Check color contrast ratios against WCAG 2.1 standards. Enter foreground and background colors in hex, RGB, or HSL. Get instant AA and AAA pass/fail results.
| Element Type | Level AA | Level AAA |
|---|---|---|
Small Text Under 18pt / under 14pt bold | ✓ PassRequires 4.5:1 | ✓ PassRequires 7:1 |
Large Text 18pt+ / 14pt+ bold | ✓ PassRequires 3:1 | ✓ PassRequires 4.5:1 |
UI Components Buttons, inputs, icons, focus rings | ✓ PassRequires 3:1 | Not defined |
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps.
Understanding WCAG Contrast Requirements
WCAG 2.1 defines minimum contrast ratios to ensure text and UI elements are readable for users with low vision or color blindness. Higher ratios mean better accessibility.
Small Text — AA (4.5:1)
Body text, captions, and any text under 18pt (24px) or under 14pt (18.67px) bold must achieve at least a 4.5:1 ratio to pass WCAG 2.1 Level AA, the most widely required standard.
Small Text — AAA (7:1)
Level AAA requires a 7:1 ratio for small text. This enhanced level is recommended for applications used by people with severe low vision and is increasingly expected in enterprise products.
Large Text — AA (3:1)
Text at 18pt (24px) or larger, or bold text at 14pt (18.67px) or larger, benefits from a reduced minimum of 3:1. Large text is more legible at lower contrast due to its size.
UI Components — AA (3:1)
WCAG 2.1 Success Criterion 1.4.11 requires visual information conveying the state or boundaries of UI components — like input borders, checkbox outlines, and icon fills — to meet 3:1.
Quick Tips
- White (
#ffffff) on pure black (#000000) achieves the maximum ratio of 21:1. - Decorative elements and inactive/disabled UI components are exempt from contrast requirements.
- Logos and brand wordmarks are also exempt, though good contrast is still recommended.
- Use the Swap button to quickly reverse foreground and background — the ratio stays the same.