Color Contrast Checker - WCAG Accessibility Contrast Ratio Tool

Check WCAG color contrast ratios for AA and AAA accessibility compliance

Color Tools

Tool

Foreground (Text)

Background

Sample Normal Text — The quick brown fox

Large Text Preview (24px Bold)

Small body text for readability testing purposes.

Contrast Ratio

14.63:1

Normal Text

✓ AA (4.5:1)✓ AAA (7:1)

Large Text (18pt+ or 14pt+ Bold)

✓ AA (3:1)✓ AAA (4.5:1)

UI Components & Graphics

✓ AA (3:1)

How to Use

1Pick a foreground (text) color
2Pick a background color
3View the contrast ratio and WCAG AA/AAA pass/fail results
4Use the swap button to reverse colors

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios: AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 for normal text.

Large text is defined as 18pt (24px) or larger regular text, or 14pt (approximately 18.67px) or larger bold text.