ACCESSIBILITY TOOL

Color Contrast Checker

Check WCAG 2.1 compliance between any two colors. Get instant AA/AAA ratings, live text previews, accessible color suggestions, and color blindness simulation.

Runs in your browser Real-time results No data sent to server

Colors

Contrast Ratio

21:1
Excellent

WCAG 2.1 Results

Live Preview

Heading Text

Large text (18px bold)

Normal body text at 16px. This is a sample paragraph to show readability at regular size.

Small text at 14px — fine print and captions.

Link text

Color Blindness Simulation

See how your color pair looks under different color vision conditions.

Protanopia
Aa
Red-blind
Deuteranopia
Aa
Green-blind
Tritanopia
Aa
Blue-blind
Achromatopsia
Aa
Total color blindness

How WCAG Contrast Works

AA
Level AA

Minimum contrast of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). Required for most websites.

AAA
Level AAA

Enhanced contrast of 7:1 for normal text and 4.5:1 for large text. The highest accessibility standard.

UI Components

Non-text elements like icons, borders, and focus indicators need at least 3:1 contrast ratio against adjacent colors.

Copied!

Related Tools