Color Contrast Matrix
Paste a palette to see the WCAG contrast ratio between every pair of colors at once, with AA and AAA pass indicators.
Check a whole palette at once
Testing colors one pair at a time is slow when you have a real palette to validate. This matrix compares every color against every other in a single grid, showing the exact WCAG contrast ratio in each cell and shading it by the level it passes — AAA, AA, AA for large text only, or fail. It's the fastest way to find which combinations are safe for body text, which are only usable for headings, and which to avoid entirely.
Paste your hex values, one per line, and read across a row to see how a given color performs as text on every other background. Because contrast is symmetric, the grid is mirrored — so it doubles as a quick reference for both text and background roles.
Accurate and private
Ratios use the official WCAG luminance formula and are computed entirely in your browser.
Frequently Asked Questions
What is a color contrast matrix?
It is a grid that shows the WCAG contrast ratio between every pair of colors in your palette at once, so you can instantly see which text-and-background combinations are accessible.
What ratios pass WCAG?
Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text (18pt, or 14pt bold) needs 3:1 for AA. The matrix flags each pair as AAA, AA, AA Large, or fail.
How many colors can I test?
Add as many hex colors as you like, one per line. Every pair is compared both directions since foreground and background contrast is symmetric.
Is this tool free and private?
Yes. All contrast is calculated in your browser — no sign-up and nothing uploaded.
Need an accessible, standards-compliant design? Let’s build it.