WCAG AAContrast MatrixBrand ColorsFree
Generated Palette
50
100
200
300
400
500
600
700
800
900
Contrast Matrix (WCAG AA = 4.5:1)
| BG / FG | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| 50 | 1.0 | 1.1 | 1.3 | 1.7 | 2.3 | 3.5 | 4.6 | 6.2 | 8.5 | 11.6 |
| 100 | 1.1 | 1.0 | 1.2 | 1.5 | 2.0 | 3.1 | 4.1 | 5.5 | 7.6 | 10.4 |
| 200 | 1.3 | 1.2 | 1.0 | 1.3 | 1.7 | 2.6 | 3.4 | 4.6 | 6.3 | 8.7 |
| 300 | 1.7 | 1.5 | 1.3 | 1.0 | 1.3 | 2.0 | 2.6 | 3.6 | 4.9 | 6.7 |
| 400 | 2.3 | 2.0 | 1.7 | 1.3 | 1.0 | 1.5 | 2.0 | 2.7 | 3.7 | 5.1 |
| 500 | 3.5 | 3.1 | 2.6 | 2.0 | 1.5 | 1.0 | 1.3 | 1.8 | 2.4 | 3.3 |
| 600 | 4.6 | 4.1 | 3.4 | 2.6 | 2.0 | 1.3 | 1.0 | 1.4 | 1.9 | 2.5 |
| 700 | 6.2 | 5.5 | 4.6 | 3.6 | 2.7 | 1.8 | 1.4 | 1.0 | 1.4 | 1.9 |
| 800 | 8.5 | 7.6 | 6.3 | 4.9 | 3.7 | 2.4 | 1.9 | 1.4 | 1.0 | 1.4 |
| 900 | 11.6 | 10.4 | 8.7 | 6.7 | 5.1 | 3.3 | 2.5 | 1.9 | 1.4 | 1.0 |
Passes AA (4.5:1+) Fails AA
Frequently Asked Questions
What is WCAG AA contrast?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).
How is the palette generated?
The tool creates lighter and darker variations of your brand color, then tests all pairs against WCAG AA contrast requirements.
Can I use these colors directly?
Yes. All passing color pairs meet WCAG AA requirements for normal text contrast.
Love this tool? Explore 999+ more
Free online tools for images, PDFs, text, code, and more. All running in your browser.
Explore All Tools