Contrast grid: test every color pair in a palette against WCAG
Checking a palette one pair at a time misses combinations. This grid puts every color on both axes, text down the side and backgrounds across the top, and fills each cell with the WCAG 2.2 contrast ratio and the level it meets. Filter to passing pairs, then copy the result as CSV or Markdown.
| Text ↓ on → | #211A26 | #7B3F8C | #E9D8EF | #FFFFFF | #F2B84B |
|---|---|---|---|---|---|
| #211A26 | · | 2.36:1Fail | 12.52:1AAA | 16.92:1AAA | 9.45:1AAA |
| #7B3F8C | 2.36:1Fail | · | 5.29:1AA | 7.16:1AAA | 4.00:1AA large |
| #E9D8EF | 12.52:1AAA | 5.29:1AA | · | 1.35:1Fail | 1.32:1Fail |
| #FFFFFF | 16.92:1AAA | 7.16:1AAA | 1.35:1Fail | · | 1.78:1Fail |
| #F2B84B | 9.45:1AAA | 4.00:1AA large | 1.32:1Fail | 1.78:1Fail | · |
On this page
A palette of five colors has twenty possible text-on-background pairings, and a design system with a dozen colors has well over a hundred. Designers usually check the two or three they plan to use, then a developer reaches for a combination nobody tested. A contrast grid shows them all at once, so the accessible pairs are agreed before anyone builds a screen.
How to use it
Type or paste your colors into the box: hex codes, rgb(), hsl() or color names, separated by commas or new lines. You can also drag swatches from anywhere on ColorPlum onto the grid, or press Use my saved colors to load the colors in your tray. The grid holds up to twelve colors.
Text colors run down the left side and backgrounds across the top. Each cell shows a sample, the ratio and its level:
- AAA: 7:1 or more, the enhanced level for body text.
- AA: 4.5:1 or more, the level most accessibility laws and style guides require for body text.
- AA large: 3:1 or more. Fine for text at 24px and up (or 18.66px bold), and for icons and the edges of buttons and inputs.
- Fail: under 3:1. Use the pair for decoration only.
Use the Show menu to hide every pair below a level, which turns the grid into a list of approved combinations you can paste into a style guide with Copy as Markdown or into a spreadsheet with Copy as CSV.
Why ratios are cut, not rounded
The grid uses the WCAG 2.2 formula and truncates the result to two decimals. A pair that works out at 4.497:1 shows as 4.49:1 and fails AA, as the standard intends, instead of rounding up to a pass it doesn't have.
Worked example
The starting grid holds five colors from a plum brand: ink #211A26, plum #7B3F8C, lilac #E9D8EF, white and marigold #F2B84B. Ink on white measures 16.92:1 and ink on marigold 9.45:1, both AAA. Plum on white is 7.16:1, also AAA, but plum on lilac drops to 5.29:1, which is still AA for body text. Plum on marigold is 4.00:1, so that pairing is only good for large text and icons. Lilac, white and marigold against one another stay under 1.8:1, so none of those can carry text at all. Set Show to "4.5:1 and up" and the grid shrinks to the pairs a team can use for paragraphs: every ink pairing, plus plum on white and plum on lilac.
What the grid doesn't cover
Contrast is one test among several. A pair that passes can still be hard to tell apart for someone with a color-vision deficiency if it relies on hue alone, so pair color with a label, an icon or an underline. For one pair at a time with a suggested fix, use the contrast checker.