WCAG & Accessibility·5 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. Start with two constraints, the background color and a target contrast ratio, and only then pick 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 free Accessible Color Palette Generator 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 very 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 what the Accessible Color Palette Generator automates for 2 to 12 colors, 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.

If you already have a brand color, enter it in the optional Brand color field. The palette then starts from your brand hue and spaces the other colors from there. The tool also reports your brand color's own ratio on the background and whether it passes the target, which answers the common question of whether the brand color itself can be used for text.

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 4.5:1 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 4.5:1 target and you get hues spaced 60 degrees apart, each pushed dark enough to pass. The red comes out a little deeper than a fire-engine red, and the yellow lands as an olive, because yellow has the farthest to fall. Each swatch shows its ratio and a line of sample text. Copy hex list gives you the values separated by commas, and Copy CSS variables gives you a :root block with --color-1, --color-2 and so on, ready to paste.

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 and suggests a lighter or darker background or the 3:1 target. An honest empty result beats six colors that quietly fail.

Contrast-safe 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 makes these 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. Below the swatches, the color blindness check lists any pairs that look almost the same under protanopia, deuteranopia, tritanopia or achromatopsia. Treat a listed pair as a signal to add labels or patterns, or to shuffle the hues.

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.
Ignoring the color blindness check because every swatch 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 a different look, press Shuffle hues rather than tweaking by hand. It rotates the starting hue, and every candidate keeps the guarantee, which turns a compliance argument into a preference choice. With a brand color set, the palette stays anchored to that hue instead.

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 see an actual chart or screenshot through different eyes, upload it to 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.