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
🌈 Browse More Tools
Complete Guide: Contrast Grid Checker
Everything you need to know about using this tool effectively
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.
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).
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.
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.
Test both directions: foreground-on-background and background-on-foreground.
A combination that fails for normal text may pass for large text.
The grid makes it easy to spot which color pairs work and which do not.
For accessible designs, ensure every text-background combination in your palette passes AA.
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.
Color Palette Tools for Designers
Complete guide to color palette creation tools for brand identity, UI design, and creative projects. Expert-curated collection of the best free, browser-based color palette generators.
Color Accessibility & Contrast Tools
Ensure inclusive design with professional accessibility tools. Test color contrast, simulate color blindness, and create accessible color schemes that work for everyone.