Color Contrast Checker
This tool helps you verify which colors in your theme's palette meet the WCAG contrast requirements for accessibility in both light and dark modes.
Understanding Contrast Ratings
- 7.0+ AAAExcellent contrast, exceeds WCAG AAA (7:1)
- 4.5+ AAGood contrast, meets WCAG AA for normal text (4.5:1)
- 3.0+ AA LargeFair contrast, meets WCAG AA for large text only (3:1)
- FailPoor contrast, doesn't meet minimum WCAG requirements
Light Mode
Dark text on colored backgrounds
Primary Colors
primary 100
primary 200
primary 300
primary 400
primary 500
Secondary Colors
secondary 100
secondary 200
secondary 300
secondary 400
secondary 500
Neutral Colors
neutral 100
neutral 200
neutral 300
neutral 400
neutral 500
neutral 600
neutral 700
neutral 800
neutral 900