Color tools

Which one do you need?

Almost every color question a designer or developer has comes down to one of four things, so start with the question rather than the tool name.

You have two colors and you want to know if they pass

That's a contrast checker. Put in the text color and the background, get the ratio back. This is the simplest case and it is well served: Adobe, WebAIM and a federal accessibility site all have good ones, and ours will not be meaningfully better than theirs. We built one because the cluster is incomplete without it and because people arrive here mid-task and shouldn't be sent away. Use whichever one is already in your bookmarks.

You have a whole palette and you want to know where it breaks

That's a contrast grid. A design system has eight or nine colors, and checking them a pair at a time means 72 separate checks, which is enough work that it rarely gets done, so the failures ship. The palette contrast grid takes the whole set and shows every pair at once with its ratio and its verdict.

We built it because we needed it. Benchvale's own accent shipped in a first draft at #23A6B8, which measured 2.82:1 against the primary tile. That is under the 3:1 floor for graphics, so the logo itself would have failed a check, and no tool we could find would have told us. The fix was to split the accent in two: a bright one for marks and a deeper one for anything carrying text. That is a genuinely common mistake and it is invisible until you look at every pair.

You want to know if your colors work for people who see color differently

That's a color blindness simulator. Worth saying plainly: contrast and color blindness are two different problems, and passing one does not mean passing the other. Contrast ratio is a luminance calculation, so it says nothing about hue. Two colors can sit at a comfortable 5:1 and still be indistinguishable to someone with deuteranopia. If your interface uses red and green to mean pass and fail, the ratio will tell you nothing about the actual problem.

You have the colors settled and you want them out of the design tool

That's the palette export. CSS custom properties for the stylesheet, a JSON token file for anything that reads tokens programmatically. The useful part is carrying the contrast verdicts through into the output, so the file that lands in the codebase remembers which pairs were checked and which ones failed.

The numbers, once, so you don't have to look them up again

WCAG contrast requirements have not changed across versions 2.0, 2.1 and 2.2. There are three thresholds worth memorizing and they cover almost every real decision.

• 4.5:1 is AA for normal text. This is the one that matters most and it is the one most brand palettes miss.
• 3:1 is AA for large text and for interface graphics. Large text means 18.66px bold or 24px regular and up. Interface graphics means icons, focus rings, input borders, chart strokes: anything you need to see to use the thing.
• 7:1 is AAA for normal text, and 4.5:1 is AAA for large text. AAA is not usually a legal requirement and chasing it across a whole palette tends to flatten a brand into grays. Treat it as a target for body copy, not a rule.

The rule people forget is the 3:1 one, because it applies to things that don't look like text. An input border at 1.4:1 fails, and a form full of invisible boxes is a real accessibility problem even though every word on the page passes. We found that in our own tokens the same week we found the accent problem.

What these tools will not do

None of this tells you whether a design is good. Contrast is a floor, not a goal, and a palette that passes every check can still be unpleasant, illegible at small sizes, or wrong for the brand. The tools answer a narrow, checkable question, which is exactly why they can be automated.

They also don't cover everything WCAG asks for. Contrast is one success criterion among many. Focus order, keyboard operation, labels, motion and text alternatives are all separate problems that no color tool touches. If you're working toward a compliance target, treat a green grid as one line item cleared rather than as a pass.

Why these run in your browser

A contrast ratio is about six lines of arithmetic. There is no reason to send a palette anywhere to calculate it, so we don't. Every tool in this cluster does its work in the page, and the share links carry state in the URL fragment, which browsers never transmit to a server. Once a page has loaded, you can turn off your wifi and it keeps working. That's a claim you can check with a network tab open, which is the only kind of privacy claim worth making.

We wrote down how that's built and how it's tested in how we build tools.

Questions

Which ratio do I actually need to hit?

For normal body text, 4.5:1. Large text, meaning roughly 24px or 19px bold and above, drops to 3:1, and so do interface components and graphics you need to see. Those are the AA thresholds, which is what most teams are held to.

My brand color fails. Now what?

Keep it and move it. A color that fails as body text is often fine as a background behind white, as a border, or as a large heading. That's the usual fix and it costs nothing: accent colors that fail as text walks through a real example, including our own.

Other tools you might want

Developer tools and Marketing tools .