WCAG Color Contrast Checker

Calculate the contrast ratio of text and background colors. ensure your design requires WCAG 2.1 accessibility standards.

Contrast Ratio
:1
Poor Contrast
AA Normal Text
Small text
Fail
AA Large Text
Bold 18px+
Fail
AAA Normal Text
Small text
Fail
AAA Large Text
Bold 18px+
Fail

Preview

Almost before we knew it, we had left the ground.

The distinction between WCAG AA and AAA is crucial for accessibility. Ensure your text is readable for everyone.

Why is Color Contrast Important?

Color contrast is a critical component of web accessibility. It ensures that text is readable for virtually everyone, including people with visual impairments like color blindness or low vision.

Level AA (Minimum)

Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Level AAA (Enhanced)

Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.