Color tools

Which one do you need?

Color questions on this hub come 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. Ours is here so you can check a pair without leaving the page you are on. 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 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. We had checked the accent against the page, but never against the tile it sat on. The fix was to split the accent in two: a bright one for marks and a deeper one for anything carrying text. A pair nobody thought to check stays 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 the AA and AAA floors listed below.

• 4.5:1 is AA for normal text. This is the floor for body copy, and palettes on this hub are checked against it.
• 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 here does its work in the page, and the share links carry state after the hash mark, 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 drops to 3:1. That means 24px and up, or about 18.7px bold and up. Input borders, icons and other parts you need to see also need 3:1. Those are the Level AA thresholds in WCAG 2.2. Type two hex codes into the contrast checker and it gives you every verdict at once.

My brand color fails. Now what?

Keep it for what it can carry, and add a darker shade for text. Contrast works both ways, so white text on your color scores the same ratio as your color on white. At 3:1 or more, it can still carry large headings, icons and borders. For body text, the contrast checker suggests the nearest shade that reaches 4.5:1. Accent colors that fail as text walks through our own.

Does passing contrast mean color blind users can tell my colors apart?

No. A contrast ratio compares brightness against one other color, such as the background, and says nothing about hue. Error red #D93025 and success green #1E8E3E both clear 3:1 on white, yet with deuteranopia the color blindness simulator turns both into close olive tones. Paste your palette there and it lists the pairs that become hard to tell apart.

Are my colors sent anywhere?

No. Every color tool here calculates in your browser tab. Before any update to one of these tools goes live, an automated check types into every box and presses every button, and blocks the update if what it typed turns up in a request. A share link carries your palette after the # in the address, and browsers leave that part out of the requests they send.

Other tools you might want

Handing the colors to a developer? The developer tools format JSON, compare text, encode base64 and URLs, generate UUIDs, hashes and passwords, and chain decoding, formatting and hashing steps on one paste. Launching the page you just colored? The marketing tools build and check UTM campaign links, catch source names that split your reports, write metadata and Open Graph tags, and make URL slugs.