WCAG & Accessibility·4 min read

How to Build an Accessible Palette That Always Passes

Most palettes are picked by eye and patched after the audit comes back red. There's a saner order of operations. How to build an accessible palette starts with two constraints, the background color and a target contrast ratio, and only then picks hues. Fix those constraints first and every color becomes solvable math: keep the hue, walk the lightness until the ratio clears the bar. This guide explains which ratios to target, works a real example including one that's provably impossible, and covers the chart and dashboard cases where contrast usually slips.

Open the tool All insights

Why hand-picked palettes fail contrast audits

Some hues start with a handicap.

Ask a designer for six category colors and you'll get six pleasant mid-tone hues, usually balanced for mood rather than luminance. Then the audit runs and half of them fail against the page background. It isn't carelessness; it's physics. Hues carry wildly different intrinsic lightness. Pure yellow, #FFFF00, manages a ratio of just 1.07:1 on white, while pure blue starts out far darker and passes easily.

Fixing the failures one at a time tends to wreck the balance that made the palette attractive, which is how teams end up cycling through revisions for days. Solving all the colors against the background in one pass avoids the whack-a-mole entirely.

How to build an accessible palette from the background up

Start with the surface. Contrast only exists between two colors, so a palette is never accessible in the abstract, only against a specific background. Second, pick the ratio the colors must clear, based on the job they'll do. Third, distribute hues evenly around the color circle so categories stay visually distinct.

With those inputs fixed, each color is a small search problem: hold the hue, try a saturated candidate, and step the lightness toward whichever extreme gains contrast on your background until the rounded hex value passes. That's precisely what the Accessible Color Palette Generator automates, including the rounding check, since a color that passes as floating point math can land a hair short once it's snapped to an 8-bit hex code.

Palette ratios explained: what 3:1, 4.5:1, and 7:1 buy you

The 3:1 target covers large text, chart fills, icons, and UI component boundaries under WCAG's non-text contrast rule. It's the right choice for dashboard series colors, where the shapes are big and the color mostly distinguishes categories. The AA text target is the default for anything that renders words at body size, from labels to badges. And 7:1 is the AAA tier, worth choosing for long-form reading interfaces or audiences skewed toward older or low-vision users.

Pick the strictest ratio the colors genuinely need, not the strictest one that exists. Forcing chart fills to AAA text levels drags every hue toward the extremes and costs you differentiation between the colors themselves.

A worked palette request, including an impossible one

Ask the generator for six colors on a white background at the AA target and you get hues spaced 60 degrees apart, each pushed dark enough to pass: the red arrives as a deep brick rather than a fire-engine red, and the yellow lands as an olive, because yellow has the farthest to fall. The output copies as a hex list or as CSS variables, ready to paste: :root { --color-1: ...; } and so on.

Now change the background to #808080 and request 7:1. Nothing comes back, and that's correct. On that mid gray, pure black only reaches about 5.32:1 and pure white about 3.95:1, so no color in existence hits 7:1 in either direction. The tool says so explicitly and suggests a lighter or darker surface or the 3:1 target. An honest empty result beats six colors that quietly fail.

Contrast safe data viz colors for charts and dashboards

Charts are where accessible palettes earn their keep, because a legend full of samey mid-tones fails twice: against the background and between the series. Evenly spaced hues at a guaranteed ratio solve the first problem and most of the second, which is what makes contrast safe data viz colors more than a compliance checkbox; the chart simply reads faster for everyone.

Two chart-specific notes. Thin elements like 1px line strokes and small scatter points deserve the strongest contrast you can give them, so lean toward the higher targets there. And hue spacing alone doesn't protect colorblind readers if two series share lightness, so verify the finished set separately.

Accessible palette mistakes that undo the math

The guarantee is conditional, and these are the conditions people break:

Using the colors on a different surface than they were generated for. A palette solved for white carries no promise on a gray card or a dark modal.
Putting text on top of the palette colors. The guarantee is color-against-background; a white label on a palette swatch is a brand-new pair that needs its own check.
Lightening colors for hover or disabled states after generation, which silently drops them below the target.
Reusing a light-theme palette in dark mode instead of regenerating against the dark surface.
Assuming the set is colorblind-safe because it passed contrast; those are different properties.

Three tips for keeping a palette accessible over time

Ship the ratios with the colors. Store each token alongside the background it was solved for and the ratio it achieves, so future edits know what invariant they're protecting. Regenerate per theme: light mode, dark mode, and any tinted surfaces each get their own solved palette rather than shared hexes.

And when the brand team wants different aesthetics, use the shuffle rather than manual tweaks. Rotating the hue offset explores alternative looks while every candidate keeps the guarantee, which turns a compliance argument into a preference choice.

Pairing the palette generator with other color tools

The Accessible Color Palette Generator solves colors against a background; it deliberately does one job. To test a specific text-on-fill combination, like button labels on your new palette, use the Color Contrast Checker, which also suggests the nearest passing shade when something misses. To confirm the palette's colors stay distinguishable from each other under protanopia or deuteranopia, paste the hex list into the Color Blindness Simulator.

If you're exploring look and feel before accessibility constraints enter the picture, the Color Palette Generator builds harmony-based schemes from a single brand color, and you can bring the winner back here to make it pass.