Contrast grid — check every text and background pair in a palette

How to use the contrast grid

1. Paste your palette into Palette (one colour per line). HEX, rgb(), hsl() and CSS names all work.
2. Choose what to Highlight: AA (4.5:1), AAA (7:1) or Large text (3:1).
3. Read the count of pairs that pass, then the table: rows are text colours, columns are backgrounds.
4. Use the visual grid to see each pair as real text; failing pairs are faded.
5. Download the table as contrast-grid.csv to share with your team.

What it does and when to use it

Checking a palette pair by pair is slow. With five colours there are 20 text-on-background combinations; with ten there are 90. The grid works them all out at once, so you can see which colours are safe for body text, which only work for headings or icons, and which should never be paired.

Run it when you set up a design system, before you hand a palette to developers, or when an audit flags contrast problems. The result makes a useful “allowed combinations” chart for documentation. To dig into one pair with a size-aware verdict, use the WCAG checker. To fix a failing pair by adjusting lightness, the colour contrast checker suggests the nearest passing colour. If the palette also needs to survive colour-vision deficiency, run it through the colour blindness simulator.

How it works

For each pair, both colours are converted to WCAG relative luminance L, using the sRGB transfer function and the weights 0.2126, 0.7152 and 0.0722. The ratio is (L of the lighter + 0.05) ÷ (L of the darker + 0.05). Each cell is graded: AAA at 7:1 or more, AA at 4.5:1, AA18 at 3:1, and ✗ below that. Ratios are compared unrounded, so a pair at 4.499:1 never shows as AA.

Worked examples

These are the grid’s own results for the default five colours: navy #0f172a, blue #3b82f6, amber #f59e0b, white and slate #64748b.

• AA (4.5:1): 8 of 20 pairs pass. Navy and white reach 17.85 AAA; amber on navy reaches 8.31 AAA.
• AAA (7:1): only 4 of 20 pass, the navy–white and navy–amber pairs in both directions.
• Large text (3:1): 12 of 20 pass.

The blue row reads: 4.85 AA on navy, 1.71 ✗ on amber, 3.68 AA18 on white and 1.29 ✗ on slate. White text on this blue is fine for a large button label but not for small text.

Limits and tips

• Translucent colours are blended onto each background before the ratio is calculated; for real overlays, enter the solid result instead.
• The grid ignores font size; AA18 cells still need large text in use.
• Calculations run in your browser.