Color Contrast Grid
100% LocalGenerate a full color contrast matrix to check WCAG AA/AAA compliance for multiple colors.
#ffffff | #000000 | #1e293b | #6366f1 | #f59e0b | #10b981 | #ef4444 | #8b5cf6 | |
|---|---|---|---|---|---|---|---|---|
#ffffff | Aa21:1 AAAAA | Aa14.63:1 AAAAA | Aa4.47:1 AAAAA | Aa2.15:1 AAAAA | Aa2.54:1 AAAAA | Aa3.76:1 AAAAA | Aa4.23:1 AAAAA | |
#000000 | Aa21:1 AAAAA | Aa1.44:1 AAAAA | Aa4.7:1 AAAAA | Aa9.78:1 AAAAA | Aa8.28:1 AAAAA | Aa5.58:1 AAAAA | Aa4.96:1 AAAAA | |
#1e293b | Aa14.63:1 AAAAA | Aa1.44:1 AAAAA | Aa3.27:1 AAAAA | Aa6.81:1 AAAAA | Aa5.77:1 AAAAA | Aa3.89:1 AAAAA | Aa3.45:1 AAAAA | |
#6366f1 | Aa4.47:1 AAAAA | Aa4.7:1 AAAAA | Aa3.27:1 AAAAA | Aa2.08:1 AAAAA | Aa1.76:1 AAAAA | Aa1.19:1 AAAAA | Aa1.05:1 AAAAA | |
#f59e0b | Aa2.15:1 AAAAA | Aa9.78:1 AAAAA | Aa6.81:1 AAAAA | Aa2.08:1 AAAAA | Aa1.18:1 AAAAA | Aa1.75:1 AAAAA | Aa1.97:1 AAAAA | |
#10b981 | Aa2.54:1 AAAAA | Aa8.28:1 AAAAA | Aa5.77:1 AAAAA | Aa1.76:1 AAAAA | Aa1.18:1 AAAAA | Aa1.48:1 AAAAA | Aa1.67:1 AAAAA | |
#ef4444 | Aa3.76:1 AAAAA | Aa5.58:1 AAAAA | Aa3.89:1 AAAAA | Aa1.19:1 AAAAA | Aa1.75:1 AAAAA | Aa1.48:1 AAAAA | Aa1.13:1 AAAAA | |
#8b5cf6 | Aa4.23:1 AAAAA | Aa4.96:1 AAAAA | Aa3.45:1 AAAAA | Aa1.05:1 AAAAA | Aa1.97:1 AAAAA | Aa1.67:1 AAAAA | Aa1.13:1 AAAAA |
Privacy note
This tool runs entirely in your browser. Your input is never uploaded, logged, or sent to AllDevToolsHub or anyone else, and it keeps working offline once the page has loaded.
How to Use Color Contrast Grid
Enter Colors
Add multiple foreground and background colors to test.
View Grid
The grid shows every combination with WCAG AA/AAA contrast ratios.
Identify Failures
Failing combinations are highlighted in red with the exact ratio.
Color Contrast Grid: the essentials
The Color Contrast Grid renders an N×N matrix of every foreground/background combination in your palette, color-coded by WCAG AA and AAA compliance. Built for design-system work where one bad pair, say, your brand orange on white, quietly fails accessibility across dozens of components.
Key points
- Generates standard CSS and color values compatible with all modern browsers.
- Pixel-precise output exports production-ready CSS and design assets.
- All processing runs locally, design values and palettes never leave your machine.
What is Color Contrast Grid?
Frequently Asked Questions
Technical Deep Dive
Color Contrast Grid
Generate a visual contrast ratio matrix for a set of colors, showing how every foreground/background pair performs against WCAG AA (4.5:1) and AAA (7:1) requirements. Add your own colors, use the built-in palette, filter to show only passing or failing pairs. Click any cell to copy the pair info.
Pixel-Precise Output
Generates CSS, tokens, or assets that match what your design system expects.
Live Visual Preview
See changes the moment you make them, no copy-paste cycle between tool and IDE.
Copy-Paste Ready
Output is formatted for direct use in stylesheets, Tailwind configs, or Figma tokens.
01 Contrast Threshold Matrix
| Context | Standard | AA Ratio | AAA Ratio |
|---|---|---|---|
| Body Copy | WCAG 2.1 | 4.5 : 1 | 7.0 : 1 |
| Large Text (18pt+) | WCAG 2.1 | 3.0 : 1 | 4.5 : 1 |
| UI Components | WCAG 2.1 | 3.0 : 1 | 4.5 : 1 |
| Decorative | WCAG 2.1 | None | None |