Contrast Checker (WCAG)

Check color contrast for AA/AAA compliance with preview.

Contrast Checker UI

How to use

  1. Enter foreground and background colors (HEX, RGB, or use pickers).
  2. View the contrast ratio and a live preview of the combination.
  3. Check whether it passes WCAG AA/AAA for normal and large text.

Examples

  • #111 on #fff
  • #8e8e8e on #ffffff (normal vs large text)

FAQ

Thresholds?
AA: 4.5:1 (normal) / 3:1 (large). AAA: 7:1 (normal) / 4.5:1 (large).

Free, no-account tool. Your input stays in your browser.

Related tools