Skip to content

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
Contrast ratio of each text color (row) on each background color (column)
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

  1. Paste 2 to 12 hex colors, one per line or separated by commas.
  2. Choose the threshold: 3 for large text and interface parts, 4.5 for AA normal text, 7 for AAA.
  3. Read the table: rows are text colors, columns are backgrounds.
  4. 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.