Color Contrast Checker

Check WCAG 2.1 color contrast ratios for accessibility compliance. Test AA and AAA standards.

Contrast Ratio
12.63 : 1
Excellent contrast
AA — Normal Text
✓ Pass
Text < 18pt (or < 14pt bold)
Requires ≥ 4.5 : 1
AA — Large Text
✓ Pass
Text ≥ 18pt (or ≥ 14pt bold)
Requires ≥ 3.0 : 1
AA — UI Components
✓ Pass
Icons, borders, focus indicators
Requires ≥ 3.0 : 1
AAA — Normal Text
✓ Pass
Enhanced contrast for body text
Requires ≥ 7.0 : 1
AAA — Large Text
✓ Pass
Enhanced contrast for headings
Requires ≥ 4.5 : 1
👁️ Live Preview

The Quick Brown Fox

Jumps over the lazy dog. This sample text shows how your chosen color combination looks at different sizes and weights.

Small text preview — 12px caption size

What is WCAG Contrast?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with visual impairments. The contrast ratio compares the relative luminance of foreground and background colors on a scale from 1:1 (no contrast) to 21:1 (maximum — black on white).

AA vs AAA

Level AA is the minimum standard most sites should meet: 4.5:1 for normal text and 3:1 for large text or UI elements. Level AAA is the enhanced standard: 7:1 for normal text and 4.5:1 for large text. AAA is ideal for body content on content-heavy sites.