How to audit your color system in 5 minutes

You have a color palette. Maybe you picked it carefully. Maybe you inherited it from a designer who left two years ago. Maybe it came from a Dribbble shot.

Doesn't matter where it came from. What matters is whether it works. Here's how to find out in five minutes.

Step 1: Check contrast ratios

This is the test that matters most and gets skipped most often.

Take every text/background pair in your system. Primary text on the main background. Secondary text on cards. Button labels on button fills. Placeholder text in inputs. Every combination where text sits on a colored surface.

Compute the contrast ratio for each pair. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). AAA requires 7:1 and 4.5:1 respectively.

Most palettes fail here. The failures are always in the same places:

• Light gray "helper text" on white backgrounds — usually around 2.5:1. Needs to be at least 4.5:1.
• Accent-colored text on light surfaces — that orange or teal you love is probably 2-3:1 as body text.
• White text on colored buttons — depends entirely on the button color's lightness. Test it.
• Disabled state text — intentionally low contrast, but still needs to be perceivable.

Use Paletter's contrast checker to test every pair at once. Don't do this by hand. You'll skip pairs and miss failures.

Step 2: Run color blindness simulation

Take your palette and simulate the three most common forms of color vision deficiency:

• Protanopia — reduced sensitivity to red light. Affects roughly 1% of men.
• Deuteranopia — reduced sensitivity to green light. Affects roughly 6% of men. This is the big one.
• Tritanopia — reduced sensitivity to blue light. Rare, but worth checking.

The test is simple: under each simulation, can you still distinguish every color in your palette from every other color? If your accent and your error state become the same color under deuteranopia, you have a problem.

Common failures:

• Red and green become indistinguishable. Classic. If you use red for errors and green for success, add icons or labels.
• Accent and support merge. If your accent is orange and your support is a brownish tone, they may look identical under protanopia.
• Two colors that feel very different to you — say, a warm coral and a muted sage — collapse into the same muddy yellow-brown.

This doesn't mean you can't use those colors. It means you can't rely on color alone to distinguish them. Add a second indicator: an icon, a label, a pattern, a position.

Step 3: Check role clarity

Look at your palette as a set. Ask yourself: does every color have a clear, distinct job?

A palette with five colors should have five clearly different functions. If you have four blues and an accent, three of those blues are redundant. They'll confuse developers, confuse AI tools, and eventually confuse users.

The roles audit:

• Can you name each color's purpose in one word? (Background. Text. Accent. Support. Neutral.) If you can't, the role isn't clear.
• Could a developer pick the right color without asking you? If the system isn't self-documenting, it's going to be misused.
• Are any two colors doing the same job? If your "secondary" and your "muted" are both used for borders, one of them is unnecessary.

Fewer colors with clear roles beat more colors with vague purposes. Every time.

Step 4: Test at extremes

Your palette looks great on your retina display in a dim room. That's not where most users are.

White backgrounds

Does your palette work on pure white? If your "background" is a warm cream, what happens when a component sits on a white modal overlay? Can you still see the borders? Is the neutral distinguishable from the white?

Dark backgrounds

If you have a dark mode (you should), do your colors work on dark surfaces? Dark blue text on a dark gray background is invisible. Your accent might need a lighter variant. Your ink definitely needs to flip.

Sunlight

Pull up your palette on a phone and walk outside. In direct sunlight, low-contrast elements disappear. That subtle gray-on-white helper text? Gone. The difference between your background and your neutral? Invisible. Sunlight is the ultimate contrast audit.

Small sizes

Colors behave differently at small sizes. A border that's clearly "accent orange" at 2px becomes an ambiguous smudge at 1px on a non-retina screen. Test your palette at the smallest sizes it'll actually be used.

Common failures and fixes

• Accent too close to background — your accent should be the most visually distinct color. If it blends with the background, it's not accenting anything. Increase saturation or change the hue.
• Ink not dark enough — body text contrast below 4.5:1. Darken the ink or lighten the background. Don't split the difference — pick the side that gets you to 4.5:1 fastest.
• Too many colors with no clear role — if you have 8 colors and can only name 4 roles, cut the extras. A 5-color system with clear roles outperforms an 8-color system with confusion.
• No neutral — borders, dividers, and disabled states need a quiet color. If everything in your palette is vivid, your UI has no visual hierarchy. Add a neutral.
• Same-hue family — five shades of blue isn't a palette, it's a gradient. You need hue variety for role distinction, especially under color blindness simulation.

After the audit

If your palette passed all four steps, you're in good shape. Export it with roles and you have a design system, not just a color list.

If it didn't pass — and most palettes don't — you have two options. Fix the existing palette manually, or generate a new one that's pre-validated for contrast, accessibility, and role clarity from the start.

Five minutes to audit. One minute to generate a replacement that works.