Build inclusive products with confidence.

Design for everyone without compromising your style.

Stop guessing and start creating. Instantly verify WCAG compliance, simulate colorblindness, and generate accessible palettes.

Aa 21:1

Select Colors

0
0
0
Aa
21:1
Contrast Ratio
0
0
100

WCAG Compliance

These badges show whether your color pair meets WCAG accessibility standards. Higher ratios mean better readability. Learn more

AA Normal
4.5:1
AA Large
3:1
AAA Normal
7:1
AAA Large
4.5:1
↑ Change Colors

Live Preview

Heading (H1)

The quick brown fox

Body Text

The quick brown fox jumps over the lazy dog. This is regular body text used for paragraphs and long-form content.

Small Text (14px)

Small text might appear in captions, help text, or UI labels. Ensure it meets accessibility standards.

↑ Change Colors

Colorblind Simulations

See how your color combination appears to people with color vision deficiencies:

Non-interactive previews — see how your colors appear under different vision types.

Normal Vision

Reference

Protanopia

Red-Blind (1% of males)

Deuteranopia

Green-Blind (1% of males)

Tritanopia

Blue-Blind (0.001%)

Achromatopsia

Monochrome (very rare)
↑ Change Colors

Support This Tool

Accessibility Color Checker is free and always will be. If it saves you time, consider buying us a coffee to help keep it running.

☕ Buy Me a Coffee

WCAG Guidelines

Over 1 billion people worldwide live with some form of disability. Good color contrast is not just a legal requirement.

AA Standard
4.5:1
Normal text (under 18pt or 14pt bold)
AA Large
3:1
Large text (18pt or 14pt bold)
AAA Enhanced
7:1
Normal text, highest standard
AAA Large
4.5:1
Large text, enhanced standard
5,100+
ADA digital accessibility lawsuits filed in 2025
83.6%
of top websites fail basic contrast requirements
$50K/day
potential fines for non-compliance

Learn more at W3C WCAG 2.1 Contrast (Minimum)

↑ Change Colors