WCAG Contrast

AA · AAA · WCAG 2.1 · accessibility

Load your project palette and test every text/background combination for AA and AAA in a single view. Automatic chromatic correction suggestions and exportable report.

Text color
Text (FG)
Background color
Background (BG)
21.00
contrast ratio
Useful presets

Checking contrast one element at a time slows down the workflow. When working with a design system or a complex project palette — with primary, secondary, grey and state colours — you need to test all relevant combinations in a single operation.

This tool:

  • Accepts the entire project colour palette (up to 20 swatches)
  • Automatically generates the contrast matrix for all combinations
  • Highlights passing (green), borderline (yellow) and failing (red) pairs for both AA and AAA
  • Suggests minimal colour adjustments to bring borderline pairs into compliance
  • Tests text colours on brand backgrounds, status colours (success, warning, error, info)
  • Exports the report as CSV or PNG for design system documentation