Is Your Color Palette Actually Accessible? Here's How to Check

A palette that looks balanced as five swatches next to each other can still fail the moment one of those colors ends up as text on top of another - a soft yellow on white, a mid-gray on a pastel background, a "brand blue" that turns out too close in brightness to the page behind it. Contrast between a color and what sits behind it is a different question from whether colors look good together, and it's the one that actually determines whether someone can read your interface.

What the contrast badge next to each swatch means

Every swatch on the color palette generator shows a small contrast label - AAA, AA, or "Low contrast" - underneath its hex code and name. That label is the color's contrast ratio measured against whichever of pure white or pure black gives it the better score, which is the realistic case for a swatch you're about to use as text or a UI element on a light or dark surface.

The ratio itself comes from the WCAG contrast formula: it compares the relative luminance of two colors (a measure of how much light each one reflects, weighted the way human vision actually perceives brightness across red, green, and blue) and expresses the difference as a ratio from 1:1 (identical, invisible) up to 21:1 (pure black on pure white, maximum contrast). AAA means the ratio is 7:1 or higher - the strictest standard, meant for body text at normal size. AA means 4.5:1 or higher - the more commonly targeted minimum for normal text, and the bar most real interfaces aim to clear. Below 4.5:1, the badge reads "Low contrast" - not necessarily unusable (a large heading or a decorative accent has more room than dense body text), but a real flag that this color will be hard to read as small text.

The same color, two very different jobs

What this does and doesn't tell you

The badge measures each swatch's contrast against pure white and pure black - it doesn't measure your five swatches against each other. If your actual design puts swatch two as text on top of swatch four, you'd want to check that specific pairing's ratio, not just each color's individual badge. The badge is a fast, useful first filter (a swatch flagged "Low contrast" against both black and white is going to be hard to use as text on almost any realistic background), not a substitute for checking your actual final layout once colors are placed.

It's also worth knowing what the badge is silent on: color-blindness. Two colors can both individually pass AA contrast and still be hard to tell apart for someone with red-green color blindness, which is a separate concern from luminance contrast. If a design leans on color alone to convey a difference - a red versus green status indicator, say - that's worth checking independently of the contrast badges here.

A "brand color" isn't automatically a text color

One specific mistake this catches early: a lot of design systems pick one saturated, mid-brightness color as "the brand color" and then reach for it everywhere, including as text. Mid-brightness, mid-saturation colors are exactly the ones most likely to sit in the "Low contrast" zone against both white and black, because they're not dark enough to read clearly on a light background and not light enough to read on a dark one. That doesn't mean the color is wrong for the brand - it means it's better suited to backgrounds, borders, icons, and large decorative elements than to body text or small labels, where a darker or lighter variant of the same hue would actually pass. Generating variants at different lightness levels (the same hue, adjusted lighter or darker) and checking each one's badge is a fast way to find a version of "the brand color" that's actually usable as text, without abandoning the hue itself.

Checking a specific pairing, not just the badge

If you need to confirm contrast for a specific pairing rather than trusting the general white/black badge - say, swatch two as text directly on swatch four's background, not on plain white - copy both hex codes and check that exact pair with a dedicated contrast checker, since the WCAG ratio calculation works the same way for any two colors, not only a color against white or black. The badge here is a fast first pass built into the palette workflow itself, not a replacement for verifying the actual pairing your design ends up using once colors are assigned to real roles.

Using this while you build a palette

The practical workflow: generate or extract a palette, glance at the badges, and if a color you plan to use as text or a button label shows "Low contrast," either lock a different swatch in that reroll, or plan to use that color for something that doesn't need to carry text on top of it - a background fill, a border, a decorative accent. A palette doesn't need every swatch to hit AAA; it needs the swatches doing text-and-background duty to clear at least AA, and the rest can be more purely decorative.

If your palette is coming from a photo rather than being generated - a product shot, a brand reference image - the contrast badges still apply the same way once the colors are extracted; see the guide on extracting from a photo for how that pulls colors in. And if you're starting from nothing, the first guide in this series covers why generating and locking beats hand-picking hues one at a time - contrast is one more reason a generated, checked palette beats a guessed one.