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
Light Mode
Dark text on colored backgrounds
Info Colors
info 100
info 200
info 300
info 400
info 500
Success Colors
success 100
success 200
success 300
success 400
success 500
Warning Colors
warning 100
warning 200
warning 300
warning 400
warning 500
Error Colors
error 100
error 200
error 300
error 400
error 500