Contrast Grid Checker
Generate comprehensive contrast grids showing WCAG compliance for every color combination. Essential accessibility tool for testing entire color palettes, validating design systems, and ensuring inclusive color schemes with visual matrix analysis.
Examples:
- HEX: #FF0000, #00FF00, #0000FF
- RGB: rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)
- Mixed: #FF0000, rgb(0,255,0), #0000FF
Continue Your Colors Journey
What is Contrast Grid Checker?
The Contrast Grid Checker tests the contrast ratios between multiple foreground and background colors simultaneously. You enter a list of colors, and the tool creates a grid showing the contrast ratio and WCAG AA/AAA pass/fail status for every combination. This is faster than checking pairs one at a time. All processing happens in the browser.
How does Contrast Grid Checker work?
This tool computes the WCAG relative luminance for each color, then calculates the contrast ratio for every foreground-background pair. The results are displayed in a grid where each cell shows the ratio and whether it passes AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large).
Key Features
- Tests all combinations of multiple colors
- Shows WCAG AA and AAA pass/fail per cell
- Displays exact contrast ratio for each pair
- Color-coded grid for visual scanning
- Interactive color list editor
- Copy grid results
- Runs in the browser with no uploads
- Supports up to 12 colors
Common Use Cases
Auditing a design system
Check all color combinations in a design system palette at once instead of testing pairs individually.
Building accessible color sets
Find which colors from a palette can safely be used as text on which backgrounds.
Reviewing brand color accessibility
Test all brand color combinations to ensure they meet WCAG requirements.
Creating accessible chart palettes
Verify that colors used in a chart have sufficient contrast against the chart background.
How to Use This Tool
Add your colors
Enter hex codes for the colors you want to test.
Generate the grid
The tool creates a matrix showing contrast ratios for all pairs.
Review pass/fail
Check which combinations pass WCAG AA and AAA for normal and large text.
Export results
Copy or download the grid results.
Pro Tips
- 1
Test both directions: foreground-on-background and background-on-foreground.
- 2
A combination that fails for normal text may pass for large text.
- 3
The grid makes it easy to spot which color pairs work and which do not.
- 4
For accessible designs, ensure every text-background combination in your palette passes AA.
Frequently Asked Questions
How many colors can I test?
Up to 12 colors, creating a 12x12 grid of 144 contrast comparisons.
What WCAG levels are tested?
AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large).
Is my data sent to a server?
No. All calculation happens in your browser. Nothing is transmitted.
How is the contrast ratio calculated?
Using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors.
Can I save the grid?
Yes. Copy the results or take a screenshot for documentation.
Related Tools
Related Collections
Color Palette Tools for Designers
Color palette generators that build accessible, harmonious schemes from a base hex, an uploaded image, or a chosen mood. Export as CSS, SCSS, or JSON.
Color Accessibility & Contrast Tools
WCAG color contrast checkers, color-blindness simulators, and accessible palette pickers. Verify AA and AAA ratios for text, icons, and UI states.