All-pairs WCAG contrast matrix for your palette. Essential for design-system accessibility audits.
♿ Contrast matrix rows = background, columns = text

How to use

  1. Enter HEX codes, one per line.
  2. Pick standard (AA / AAA / Large).
  3. All combinations appear in a matrix.
  4. ✓ pass, ✕ fail, ⚠ large-text only.
  5. Summary shows safe combinations.

Key features

  • Up to 12 colors evaluated at once
  • WCAG 2.1 AA / AAA / Large Text standards
  • Text vs UI Components mode (3:1 vs 4.5:1)
  • Full matrix + pass-rate summary
  • Pairs with color-blind simulation

Use cases

  • Design system audit — entire palette at a glance
  • Dark mode pairing — which text colors are safe on which dark backgrounds
  • Compliance — government, finance, education must meet WCAG AA
  • Marketing assets — ad banner readability
  • Accessibility reports — design review docs

WCAG contrast standards

WCAG 2.1 sets the bar: AA: 4.5:1 (body)·3:1 (18pt+ large), AAA: 7:1 (body)·4.5:1 (large). UI components (button borders, icons) need only 3:1. Most legal frameworks (ADA US, EAA EU, KWCAG KR) require AA. Ignoring accessibility excludes roughly 15% of users (vision impaired, color-blind, presbyopia).

FAQ

vs contrast tool?

contrast is one-to-one. This is matrix-wide evaluation.

AAA is hard to hit.

AAA is a recommendation; AA is the typical legal floor. Prioritize AA.

What's "large text"?

18pt+ (or 14pt bold) only needs 3:1 instead of 4.5:1.

Free?

Yes.