Why check a whole palette
A contrast checker tests one pair at a time, but a design system has dozens: every text colour on every surface, every button on every background, every border against the page. A grid shows them all at once, so you can see which colours are safe for text, which only work at large sizes or for icons, and which should never carry words.
Paste the palette as you have it. The tool reads hex lines, CSS variables, SCSS variables, the colours inside a Tailwind config, and rgb(), hsl() and oklch() values, and takes each name from the text in front of it.
The WCAG 2.2 contrast levels
- 4.5:1 (AA): the minimum for normal text.
- 3:1 (AA large): enough for large text, 24px or more, or about 18.7px in bold, and for the parts of an interface people need to see: input borders, icons, focus rings and chart lines.
- 7:1 (AAA): the enhanced level for normal text, worth aiming for in long reading.
Ratios are rounded down to two places, so 4.49:1 never shows as a pass. The same formula is used by WebAIM's checker, browser developer tools and audit tools, so the numbers match what an accessibility audit will report.
Fixing a pair that fails
Pick any cell and the tool finds the nearest text colour that passes against that background, and the nearest background that passes against that text. It keeps the hue and moves the lightness in OKLCH, the colour space that tracks how people see lightness, so the fixed colour still looks like your colour, only darker or lighter. When a colour would leave the sRGB range, its saturation is lowered just enough to fit.
Copy the hex, or add it to the palette and see how it does against everything else.
Colour vision deficiency
About one man in twelve and one woman in two hundred has some colour vision deficiency. Switch the grid to protanopia, deuteranopia or tritanopia to see the palette the way they do, or to no colour at all. The contrast ratio hardly changes, since it measures lightness, but colours that only differ in hue become hard to tell apart: a sign that a status or a chart needs a second cue, like an icon or a label.
Accessibility beyond the palette
Since June 2025 the European Accessibility Act has applied to many websites and apps sold in the EU, and WCAG 2.2 AA is the standard most audits use. Contrast is the first check, not the whole of it: focus, keyboard use, text size, motion and clear errors matter as much. I design products to WCAG 2.2 AA from the first screen. For type sizes that stay readable at every width, try the fluid typography calculator.