About EightShapes Contrast Grid
The EightShapes Contrast Grid is a free browser tool that tests many foreground and background color combinations for compliance with WCAG 2.0 minimum contrast standards. It generates a visual grid showing how each foreground color performs against each background color, with pass/fail indicators.
Overview
The EightShapes Contrast Grid is a free browser tool that tests multiple foreground and background color combinations for compliance with WCAG 2.0 minimum contrast standards. It solves the problem of manually checking each color pairing one at a time by generating a full visual grid in a single view.
Accessibility auditors, UI designers, and front-end developers use it to validate color palettes early in the design process. Unlike one-off contrast checkers that test a single pair, this tool shows every combination of two color lists at once, making it easy to spot failing pairs across an entire palette.
Key Benefits
- Tests every foreground-background combination from two color lists in a single grid view.
- Shows WCAG 2.0 pass results for AAA (7:1), AA (4.5:1), and AA18 large text (3:1) thresholds.
- Marks failing pairs clearly with a DNP (Does Not Pass) label.
- Generates a shareable persistent URL for every grid configuration.
- Copies grid HTML and CSS to clipboard for embedding in documentation.
- Adjustable tile sizes (80x80, 100x100, 150x150) for readability.
How It Works
You enter one color per line into the Rows field and one per line into the Columns field, with optional comma-separated labels. The tool instantly renders a grid where each cell shows the foreground color on the background color, labeled with the corresponding WCAG 2.0 pass level — AAA, AA, AA18 (large text only), or DNP for fails.
Use Cases
- Accessibility specialists auditing existing design systems for WCAG 2.0 color contrast compliance.
- UI product designers validating a new brand color palette before handing off to engineering.
- Front-end developers checking that light and dark mode color pairs meet minimum contrast ratios.
- Design system maintainers generating documentation grids to share with their team.
- Freelance web designers proving to clients that chosen colors meet accessibility standards.
- Students and educators in web accessibility courses demonstrating contrast ratio principles.
Why Choose This Product
The Contrast Grid is best suited for anyone who needs to test many color combinations at once rather than checking pairs individually. It is a free, open-source tool with no sign-up required, hosted on GitHub Pages by Directed Edges.
