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
primary 600
primary 700
primary 800
primary 900
Secondary Colors
secondary 100
secondary 200
secondary 300
secondary 400
secondary 500
secondary 600
secondary 700
secondary 800
secondary 900
Neutral Colors
neutral 100
neutral 200
neutral 300
neutral 400
neutral 500
neutral 600
neutral 700
neutral 800
neutral 900