Palette contrast grid
Check a whole palette for accessibility at once. Paste up to 20 HEX codes and get a grid showing the contrast ratio of every text-on-background combination, with passing pairs highlighted for large text, WCAG AA or AAA.
A WCAG contrast matrix for your palette.
How to use the palette contrast grid
- Paste 2–20 HEX codes (or open a palette from the generator).
- Choose the minimum: 3:1 for large text and UI, 4.5:1 for AA, 7:1 for AAA.
- Read the grid: each cell is the row color as text on the column color.
Why a grid?
A design system rarely uses just two colors. The grid shows every possible pairing at a glance, so you can document which combinations are safe for text and which are decorative only.
Frequently asked questions
What contrast ratio is required for text?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
Can I check a palette from the generator?
Yes — open the Contrast panel in the generator, or paste the palette's HEX codes here.