Accessible Color Palettes: A Practical Guide to WCAG Contrast

The fastest way to ruin a beautiful palette is to put real text on it. That perfect pastel accent looks lovely as a swatch and disappears completely as a link on a white card. Accessibility isn’t a separate step you bolt on at the end — it’s a property of the color pairings in your palette, and you can check it while you’re still choosing colors.

What WCAG contrast actually measures

WCAG contrast is a ratio between the relative luminance of two colors — text and its background — from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The thresholds that matter:

• 4.5:1 — AA for normal body text. This is the line most of your text needs to clear.
• 3:1 — AA for large text (roughly 24px, or 18.66px bold) and for UI components and graphical objects.
• 7:1 — AAA for normal text, if you’re targeting the stricter level.

Note what contrast does not depend on: hue. Two colors can be wildly different hues and still have almost no contrast if their luminance is close. That’s why “it looks colorful” is no guarantee of legibility.

The pairings that actually break

When people say a palette “passes contrast,” they usually checked one pairing — body text on the page background — and stopped. The combinations that quietly fail are:

1. Text on a card surface, not the page background. Your surface is often a slightly different color, and the gap can flip a pass into a fail.
2. Button labels on the primary color. A mid-tone brand color with white text frequently lands around 3–4:1 — fine for large text, failing for normal.
3. Accent links on a surface. Saturated accents are the worst offender; a vivid pink link on white can sit well below 4.5:1.
4. Placeholder and muted text. Designers deliberately lower its contrast “to be subtle” and sail straight past the threshold.

Check the theme, not just one color

The practical move is to evaluate every key pairing in context at once. Our palette visualizer does exactly that: you assign five colors to roles — background, surface, text, primary, accent — see them on a real UI mockup, and get a live WCAG ratio next to each text pairing, flagged the moment it drops below AA. You fix the problem while you’re choosing colors, not after a user files a bug.

For a single pairing, the contrast checker gives you the WCAG and APCA scores plus an OKLCH suggestion to nudge a failing color back into range. And because contrast isn’t the whole story, run the result through the color blindness simulator to make sure you’re not encoding meaning in hue alone.

A quick workflow

1. Draft the palette however you like — by mood, from an image, or from a gallery palette.
2. Drop it into the visualizer and read the four contrast checks.
3. For any failure, lift the text lightness (or darken the background) until it clears 4.5:1 — OKLCH makes this a predictable, one-axis adjustment.
4. Confirm large text and UI elements clear 3:1, and sanity-check with the color blindness simulator.

Readable and good-looking aren’t in tension. You just have to check both — early, and together.