What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in brightness between text and background colors. It's expressed as a ratio (e.g., 4.5:1) where higher ratios indicate better contrast and readability.

What are the WCAG contrast requirements?

WCAG Level AA requires: 4.5:1 for normal text (under 18pt or 14pt bold), 3:1 for large text (18pt+ or 14pt+ bold). WCAG Level AAA requires: 7:1 for normal text, 4.5:1 for large text.

How do I check color contrast?

Select your foreground (text) color and background color using the color pickers. The tool automatically calculates the contrast ratio and shows WCAG compliance status (AA, AAA, or fail).

Why is color contrast important?

Good color contrast ensures text is readable for all users, including those with visual impairments, color blindness, or viewing screens in bright sunlight. It's also required for web accessibility compliance.

What does the contrast ratio mean?

Contrast ratio ranges from 1:1 (same color, no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability. WCAG recommends minimum 4.5:1 for normal text.

Is the contrast checker free?

Yes, completely free! No registration, no limits, no hidden fees. All contrast calculations happen in your browser - we never see or store your color choices.

🎯 Contrast Checker

Check color contrast ratio for WCAG accessibility compliance. Test text and background colors for AA and AAA standards.

Text Color (Foreground)

Background Color

Preview

Large Text (18pt+)

Normal Text - The quick brown fox jumps over the lazy dog. This is a sample text to preview the contrast.

Contrast Ratio

21.00:1

✅ AAA - Excellent contrast

WCAG AA

Normal Text (4.5:1)✓ Pass

Large Text (3:1)✓ Pass

WCAG AAA

Normal Text (7:1)✓ Pass

Large Text (4.5:1)✓ Pass

CSS Code

color: #000000;
background-color: #ffffff;

About WCAG Contrast Standards

WCAG AA: Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).

WCAG AAA: Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text.

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