// design tool

Color Contrast Checker

Test color combinations for WCAG AA and AAA accessibility compliance. Get instant pass/fail with smart suggestions.

Text Color

Background Color

21:1

Contrast Ratio

      1:13:14.5:17:121:1
    

WCAG AA

Normal Text

Requires 4.5:1

—

WCAG AA

Large Text (18pt+)

Requires 3:1

—

WCAG AAA

Normal Text

Requires 7:1

—

WCAG AAA

Large Text

Requires 4.5:1

—

Live Preview

Heading Text Example

This is body text showing how your color combination looks in a real-world scenario. Good contrast ensures readability for all users.

Small text (13px) — hardest to read with poor contrast

Button Text

🎨 Test Common Color Pairs