Color Contrast Checker

Check WCAG AA/AAA color contrast ratios for accessible and readable UI designs.

Color Picker

Foreground (Text)

Background

The quick brown fox

Normal body text — 16px

Small text — 14px. This is how your text will appear on this background color.

UI Button Component

Contrast Ratio

14.05:1

Rating

Excellent

Normal text — AA

Minimum ratio 4.5:1

Pass

Normal text — AAA

Minimum ratio 7:1

Pass

Large text — AA

Minimum ratio 3:1

Pass

Large text — AAA

Minimum ratio 4.5:1

Pass

UI Components — AA

Minimum ratio 3:1

Pass