Color Contrast Checker

Check if your foreground and background colors meet WCAG 2.1 accessibility standards. Test for AA and AAA compliance for normal and large text.

Large Text (24px bold)
Normal text at 16px — The quick brown fox jumps over the lazy dog.
Small text at 12px — Check readability carefully at smaller sizes.
14.18
Contrast Ratio

WCAG Guidelines

LevelNormal TextLarge Text
AA (Minimum)4.5:13:1
AAA (Enhanced)7:14.5:1

Large text = 18pt (24px) or 14pt (18.66px) bold. Normal text = anything smaller.

Accessible Color Suggestions

How to Use

  1. Pick colors — set foreground (text) and background colors using the picker or hex input.
  2. Check ratio — the contrast ratio updates instantly with pass/fail results.
  3. Review compliance — see if your colors pass AA and AAA for normal and large text.
  4. Try suggestions — click suggested accessible color combinations.