Color Contrast Checker

Check if your text and background colors meet WCAG accessibility guidelines. Test against AA and AAA standards for normal and large text.

Normal text (16px)

Large text (24px bold)

The quick brown fox jumps over the lazy dog

Contrast Ratio
4.47:1
#FFFFFF
#6366F1

WCAG Compliance

Normal Text(less than 18pt or 14pt bold)

Level AA
Fail (4.5:1)
Level AAA
Fail (7:1)

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

Level AA
Pass (3:1)
Level AAA
Fail (4.5:1)

Understanding WCAG Contrast Requirements

Level AA (Minimum): 4.5:1 for normal text, 3:1 for large text. This is the minimum requirement for most websites and applications.

Level AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text. Provides better accessibility for users with low vision.

Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold.

How to Use the Contrast Checker

Enter or select your foreground (text) and background colors. The tool instantly calculates the contrast ratio and shows whether it passes WCAG AA and AAA requirements for both normal and large text. Swap colors to test both directions.

Understanding WCAG Guidelines

The Web Content Accessibility Guidelines ensure web content is perceivable by people with visual impairments. Contrast requirements help people with low vision, color blindness, and those viewing screens in challenging lighting conditions.

Common Use Cases

Required for accessible web development, ensuring legal compliance with accessibility laws, improving user experience for all visitors, and creating readable designs. Essential for government, education, and enterprise websites.

Frequently Asked Questions about Color Contrast Checker

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