Color Contrast Grid

How to use

1. 1Pick a starting palette or paste your own. The text-colors list goes on the left and the background-colors list on the right; one color per line in HEX, rgb(), or hsl(). Add an optional label like 'brand: #1d4ed8' to name the column or row.
2. 2Choose a pass threshold: AA normal text (4.5:1, default), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1), or non-text and UI (3:1) for icons, borders, and focus rings.
3. 3Read the grid. Each cell shows the contrast ratio with a Pass or Fail badge. Toggle Swatch on for a real text-on-background preview, Swatch off for a denser numeric matrix.
4. 4Toggle Show all or Showing passes to filter out failing pairs and focus only on combinations that meet the threshold.
5. 5Click Copy CSV for a spreadsheet-ready grid with the ratio plus PASS or FAIL in every cell, or Copy passes for a plain-text list of just the combinations that meet the threshold.

About this tool

Color Contrast Grid is the bulk version of the single-pair Color Contrast Checker, built for designers and developers who are picking text and background colors from a palette or a design token file. Paste a list of text colors on one side and a list of background colors on the other, one per line, and the tool draws a grid where every cell is the WCAG 2.1 / 2.2 contrast ratio for that pair, color-coded against your chosen threshold so the safe combinations stand out immediately. The parser accepts HEX (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb() or rgba(), and hsl() or hsla() in the same line list, and an optional 'name: value' syntax lets a design token carry a friendly label into the grid header so a column reads 'slate-100' rather than '#f1f5f9'. Threshold options cover every published WCAG level: AA normal text (4.5:1, the default), AA large text (3:1, for 18pt regular or 14pt bold and up), AAA normal text (7:1), AAA large text (4.5:1), and the non-text contrast requirement (3:1) for icons, borders, focus rings, and form controls. Each cell renders the contrast ratio, a Pass or Fail badge, and an optional sample-text preview that shows your chosen text color on the real background so you can sanity-check the legibility, not just the number. Switch to swatch-off mode for a denser numeric matrix when you are comparing dozens of pairs, or toggle Hide fails to focus only on the combinations that ship. The summary line reports how many pairs pass at the chosen threshold so you can audit a whole palette in one number. Translucent colors with alpha less than 1 are composited over white before the ratio is computed (the most common assumption for design systems that ship on light surfaces) and a warning is surfaced for any line that does not parse so a typo in a hex code does not silently drop a column. Two copy options export the result for sharing: a CSV grid with the ratio plus PASS or FAIL in every cell, ideal for pasting into a spreadsheet or a code review, and a passes-only list that reads as 'ratio:1 text on background' so a developer can paste the safe combinations straight into a tokens file. Useful for designers building light and dark palettes, design system owners auditing a token set against WCAG before shipping, frontend developers verifying that brand button colors meet AA, accessibility reviewers running a full palette audit, and anyone who has hit the limit of testing one pair at a time. Everything runs locally in your browser, so the brand colors, design tokens, and palette experiments you paste here never leave your device.

Free to use. Works in your browser. No signup, no login.