Palette Contrast Matrix
Paste the colors of a palette, one per line or separated by commas. The page builds a table where each row is a text color and each column a background, so you see at once which pairs are readable. Choose the threshold, then copy the table as CSV.
Pairs that reach 4.5:1
8 of 16
4 colors · 16 ordered pairs · text color in rows, background color in columns
| Text ↓ / background → | #000000 | #ffffff | #777777 | #1a73e8 |
|---|---|---|---|---|
| #000000 | 1.00:1 fail | 21.00:1 pass | 4.69:1 pass | 4.66:1 pass |
| #ffffff | 21.00:1 pass | 1.00:1 fail | 4.48:1 fail | 4.51:1 pass |
| #777777 | 4.69:1 pass | 4.48:1 fail | 1.00:1 fail | 1.01:1 fail |
| #1a73e8 | 4.66:1 pass | 4.51:1 pass | 1.01:1 fail | 1.00:1 fail |
Each cell is the exact WCAG 2.2 ratio of the row color as text on the column color as background. The diagonal compares a color with itself (1:1). Opaque sRGB colors only; this is not a certification of conformance.
How it works
- Paste 2 to 12 hex colors, one per line or separated by commas.
- Choose the threshold: 3 for large text and interface parts, 4.5 for AA normal text, 7 for AAA.
- Read the table: rows are text colors, columns are backgrounds.
- Copy the table as CSV to open it in a spreadsheet.
What people use it for
Building a design system
Find which tokens can carry text on which surfaces before you document the rules.
Choosing a dark mode palette
See every text and background combination of a dark theme in one table.
Auditing a chart
Check that the series colors of a chart stand out from the chart background.
Questions
- How are the pairs counted?
- With N colors there are N × N ordered pairs: each color as text on each color as background. The diagonal compares a color with itself and always gives 1:1. The count of passes counts the cells that reach the chosen threshold, computed on the exact ratio.
- Is the table symmetrical?
- The ratio is, because the formula uses the lighter and the darker luminance. A pair of colors gives the same ratio in both directions, but the table keeps both so that you can read it by text color or by background.
- How is the CSV safe to open?
- Cells follow RFC 4180 quoting, and any cell starting with =, +, - or @ gets a leading apostrophe so that a spreadsheet does not read it as a formula. The colors are normalised to lowercase #rrggbb.
- Does a pass certify the palette?
- No. It is not a certification of conformance. It compares opaque sRGB colors two by two. Text sizes, weights, transparency and states are not part of the table.