Why check one pair when you can check the whole palette?
A typical design system has more color pairings than anyone checks manually: ink-on-background, brand-on-white, brand-on-dark, accent-on-card, and so on. Testing each pair one by one in a single-color checker means re-entering values repeatedly and easily missing a combination that only shows up in one obscure component. The palette matrix view solves this by treating your palette as a set, not a sequence of one-off lookups.
Running this matrix early, before a full design system is built out, is cheaper than discovering a failing accent color after it's already used in a dozen components.
How do I turn a passing pair into something I can paste into code?
This closes the gap between "we verified this pair is accessible" and "this exact value is now in our codebase." Manually re-typing a hex code from a contrast report into a CSS file is a small step, but it's also where typos creep in — a copy-pasted value that came straight from the same tool that verified the ratio removes that risk entirely.
Can teammates check colors without leaving our own style guide?
If contrast checking only ever happens on an external site that designers and engineers have to remember to visit, it tends to get skipped under deadline pressure. Embedding the live calculator directly inside your own component-library docs or brand guidelines page keeps the check one click away from wherever your team is already looking at color tokens, instead of being a separate bookmark nobody opens.
What order should I check colors in when building a new component?
A practical sequence, from most to least likely to cause a real readability problem:
- Primary text/background. The main body copy or label inside the component — check this first since it's what most users are actually reading.
- Border or outline. Button borders, input outlines, and card dividers only need the lower 3:1 UI-component threshold, but they're easy to forget entirely.
- Icon or status color. Anything conveying meaning through color (success/error/warning icons) needs its own check against the surface it sits on.
- Dark-theme variant. If the component also renders on a dark background, re-check every pair above against that background too — a passing light-mode pair says nothing about the dark-mode one.
Working through components in this order means the highest-impact failure (unreadable body text) gets caught before the lower-stakes ones (a slightly low-contrast disabled-state icon).
Switch to Palette Check for a full pairwise matrix, or calculate a single pair and copy it straight out as CSS variables or a Tailwind snippet — free, no signup.
Try the free Color Contrast Checker →Frequently asked questions
How do I audit my whole brand palette at once instead of one pair at a time?
Switch to the Palette Check tab and enter up to four of your core colors (for example ink, background, brand, and an accent). The tool builds a matrix showing the WCAG contrast ratio and pass/fail for every pairwise combination, so you can see in one screen which pairs are safe for text and which are only safe as decorative fills.
Can I turn a passing color pair directly into code?
Yes. After calculating a single contrast result, click "Copy as code" to open a snippet box with two formats: CSS variables (a :root block with --contrast-fg and --contrast-bg) or a Tailwind config snippet for theme.extend.colors. Click "Copy snippet" to copy it straight into your codebase, skipping manual re-typing of hex values.
How do I keep a live contrast checker inside my own style guide or docs?
The tool supports an embeddable widget view via a URL query parameter (?embed=1), which strips the header, navigation, and article content down to just the calculator card. Drop that URL into an iframe on an internal design-system page so teammates can test brand colors without leaving your docs.
What's a practical order to check colors when building a new component?
Check the component's primary text/background pair first, then its border or outline (3:1 minimum as a UI component), then any icon or status color used inside it, and finally how the same component looks against your dark theme's background if you support one. Checking in that order surfaces the most common failures first: body text, then structural elements, then decorative accents.
Should I re-run the contrast check after every brand color tweak?
Yes, ideally as a habit rather than a one-time pass. Because contrast ratio depends on the specific hex value, even a small lightness or saturation adjustment to a brand color can shift a previously passing pair below its threshold. Re-checking the palette matrix after any brand refresh is faster than re-auditing a live site with real users.