Brand palette checker
Check every color pair of your brand palette for accessible contrast in one go. Paste up to 24 colors, one per line, with their names if you like, and get a grid of WCAG 2.2 contrast ratios plus a list of the pairs that pass. Free, and nothing is sent anywhere.
How to check a brand palette for accessible pairs
- 1Paste your colors, one per line, with a name before or after each
- 2Pick the "Level to reach"
- 3Read the grid: text colors down the side, backgrounds along the top
- 4Take your text and background from the pairs that pass
- A contrast grid and every pair that reaches your level
What the check shows
- Every pair at once.Six colors give a grid of 36 ratios, each one marked as reaching your level or not
- Your names stay.Write "Primary #2563EB" or "#F59E0B accent" and the grid and the list use your names
- Nothing is sent anywhere.Your palette is checked by your browser, on your own device
What you can do
- Check up to 24 colors against each other in one grid
- Choose the level: "Body text, AA (4.5:1)", "Body text, AAA (7:1)" or "Large text and icons, AA (3:1)"
- Write colors as #hex, rgb(), hsl(), lab(), oklch() and the other CSS notations, or as CSS color names
- See each passing pair as a sample, the text in one color on the other, with its ratio
- Spot typos: lines that cannot be read as a color are listed under the grid
Good to know
- Only the first 24 colors are read. Lines after that are left out without a message
- Contrast is the same both ways, so the list shows each pair once, whichever color is the text
- Ratios follow WCAG 2.2 and are rounded down, so a 4.5:1 in the grid really passes. Transparency is ignored
- Each color is rounded to its HEX value before it is compared
Questions
What does a brand palette checker do?
It checks every color of your palette against every other one for WCAG contrast. Instead of testing pairs one by one, you see at a glance which combinations work for text.
How many pairs of the sample palette pass AA?
The tool opens with six sample colors. Five pairs reach 4.5:1 for body text, two reach 7:1 for AAA, and eight reach 3:1 for large text and icons.
Can I paste colors straight from my style guide?
Yes. One color per line, with a name before or after it, such as "Ink #1C2428". The name is kept and shown in the grid.
Is my brand palette sent to a server?
No. The contrast is worked out by your browser on your own device, and no request is made with your colors.
More tools in Web & code
That page doesn't exist. Search or drop a file below to find the tool you need.
One site for every file job. What’s yours?
Stop hopping between converter sites. Pick from 410+ tools, or a recipe that chains several.
- Files Stay On Your Device
- No watermark
- Works offline
Drop a file here
A pasted file works too.
or search for a tool
Open an app
From “ugh, this file” to done, in three steps.
- Drop it, or pick a task
No file? Search for what you need. Files are processed on your device, not uploaded for processing.
- Pick what you want
Smaller, another format, signed, merged. One click, no settings to study first.
- Make it a recipe
Need three steps in a row every week? Chain them once and run the same recipe next time.
One approved toolbox for the whole team.
In offices, on building sites and in agencies, teams handle sensitive files all day. ToolRecipe gives everyone the same tools and the same recipes, and the files are processed on each person's own computer.
- Files are processed on the employee's device
- Company recipes everyone runs the same way
- One place instead of ten converter sites