Contrast Grid

A design system is not a list of colours, it is a list of pairings — and the question that actually comes up is which of these can go on which. Checking that one pair at a time means n² visits to a contrast checker. For a palette of eight that is sixty-four checks, which is why nobody does it, and why design systems ship with combinations nobody ever tested. This is a palette contrast checker that does all of them at once — a WCAG colour matrix for the whole set. Paste your palette and every colour is checked as text against every colour as a background, with the contrast ratio and the WCAG grade in each cell. Green passes the level you chose, amber clears the lower bar for large text only, red fails. Paste it in whatever form you already have. Hex, rgb(), hsl() or CSS colour names, separated by newlines, commas or spaces, with CSS custom property syntax still attached if that is what you copied — it reads all of it and tells you about anything it could not. The grid is also the thing worth keeping. It is built to be screenshotted straight into a design spec or a pull request, because the check happens once and the picture gets used for a year. Everything runs in your browser.