Color Contrast Checker

Test color combinations to ensure they meet WCAG contrast requirements

Color Selection

Choose foreground and background colors to test

Foreground (Text) Color

Background Color

Quick Presets

Contrast Ratio

21.00:1

Excellent contrast

WCAG Compliance

Normal Text (AA)

4.5:1 minimum

Pass

Normal Text (AAA)

7:1 minimum

Pass

Large Text (AA)

3:1 minimum (18pt+)

Pass

UI Components (AA)

3:1 minimum

Pass

Live Preview

See how your colors look in practice

Normal Text Example

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

Large Text Example

Related Success Criteria

1.4.3 Contrast (Minimum)

Level AA

1.4.6 Contrast (Enhanced)

Level AAA

1.4.11 Non-text Contrast

Level AA

Color Contrast Checker

Test color combinations to ensure they meet WCAG contrast requirements

Color Selection

Choose foreground and background colors to test

Foreground (Text) Color

Background Color

Quick Presets

Contrast Ratio

21.00:1

Excellent contrast

WCAG Compliance

Normal Text (AA)

4.5:1 minimum

Pass

Normal Text (AAA)

7:1 minimum

Pass

Large Text (AA)

3:1 minimum (18pt+)

Pass

UI Components (AA)

3:1 minimum

Pass

Live Preview

See how your colors look in practice

Normal Text Example

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

Large Text Example

Related Success Criteria

1.4.3 Contrast (Minimum)

Level AA

1.4.6 Contrast (Enhanced)

Level AAA

1.4.11 Non-text Contrast

Level AA