Color Contrast Checker

Test color combinations for WCAG AA and AAA accessibility compliance. Check contrast ratios, preview text samples, simulate color blindness, and generate accessibility reports.

Foreground Color

Background Color

Text Size

Quick Swap

Contrast Ratio Results

Contrast Ratio

WCAG AA Normal

Requires 4.5:1

WCAG AAA Normal

Requires 7:1

WCAG AA Compliance

Normal text:

Large text:

UI components:

WCAG AAA Compliance

Normal text:

Large text:

UI components:

Text Preview

Sample Text

Sample Heading

This is normal body text that demonstrates how your color combination looks in a typical reading scenario. The quick brown fox jumps over the lazy dog.

This is smaller text that might be used for captions, footnotes, or secondary information.

Font Size Examples

24px Bold Heading

18px Large Text

16px Normal Text

14px Small Text

12px Tiny Text

Color Blindness Simulation

Protanopia (Red-blind)

Sample text as seen by someone with protanopia (red color blindness).

Contrast:

Deuteranopia (Green-blind)

Sample text as seen by someone with deuteranopia (green color blindness).

Contrast:

Tritanopia (Blue-blind)

Sample text as seen by someone with tritanopia (blue color blindness).

Contrast:

Palette Testing

Test Multiple Color Combinations

Quick presets:

Background

Add colors to test combinations across your palette

Accessibility Suggestions

Insufficient Contrast

Your current combination doesn't meet WCAG AA standards.

Suggestions:

Great Contrast!

This combination meets accessibility standards.

For AAA compliance, try increasing the contrast further.

Export & Share

Tip: WCAG AA is the legal standard for most accessibility compliance. AAA provides enhanced accessibility. Test with color blindness simulation for comprehensive coverage.