Accessibility Color Checker

Check WCAG color contrast ratios for accessibility compliance

Choose foreground and background colors to check

Foreground Color (Text)

Background Color

WCAG 2.1 contrast ratio calculation

21.00

Contrast Ratio

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).

See how your color combination looks in practice

The quick brown fox jumps over the lazy dog. This is how normal body text will appear with your chosen color combination.

Large Text Preview

This is large text (18pt+). It requires lower contrast ratios according to WCAG guidelines.

Check if your colors meet accessibility standards

Normal Text - AA (4.5:1)

Normal Text - AAA (7:1)

Large Text - AA (3:1)

Large Text - AAA (4.5:1)

1. Select your foreground (text) and background colors

2. Review the calculated contrast ratio

3. Check WCAG compliance levels (AA is minimum recommended)

4. Preview how the colors look together with sample text