How to Build a Color Palette That Actually Passes Accessibility
It's entirely possible to design a color palette that looks polished in isolation — a swatch grid, a moodboard — and still fails badly the moment real text gets placed on top of it. Accessibility isn't a separate pass you run after the palette is done; it's a constraint that needs to shape which colors make the cut in the first place.
Here's how to build a palette that's accessible from the start, rather than one you have to patch afterward.
Contrast ratio is the number that actually matters
WCAG defines accessibility for text and background pairs in terms of a contrast ratio — a number from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white). The standard thresholds are 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold) at the AA level, with AAA requiring 7:1 and 4.5:1 respectively. Anything below those thresholds is a genuine accessibility failure, not a matter of taste — readers with low vision or color vision deficiencies may not be able to read the text at all.
This means every text-and-background pairing in your palette needs to be checked individually. A palette can have five perfectly nice colors and still fail if the specific combinations your UI actually uses — light gray text on white, for instance — don't clear the ratio.
Design for pairs, not colors in isolation
The practical fix is to stop thinking of a palette as a list of colors and start thinking of it as a list of approved pairings. For every background color in the system, define which text colors are cleared to sit on top of it, and check each pairing's ratio directly rather than assuming it'll be fine because the colors 'look' high-contrast next to each other on a screen.
This is especially important for brand colors that skew mid-lightness — a vivid mid-tone blue or green often looks bold and high-contrast as a UI accent, but frequently fails 4.5:1 against both black and white text, meaning it needs a darker or lighter variant specifically reserved for anywhere text sits on top of it.
Color blindness needs a separate check
Contrast ratio protects against low vision and low-light viewing, but it doesn't protect against color vision deficiency on its own — two colors can have excellent contrast in luminance while still being difficult to distinguish from each other for someone with red-green color blindness, which affects roughly 1 in 12 men. The practical rule: never use color as the only signal for something important. Error states, success states, and status indicators should pair color with an icon, label, or pattern, so the information survives even if the color itself isn't distinguishable.
Check every pairing before you ship
Use our Color Palette tool to generate coordinated palettes from a single base color, then run each text-and-background pairing through our Contrast Checker to confirm it clears AA or AAA before it goes into your design system. Both tools run entirely in your browser.