Pick almost any website and run a contrast checker over it, and you’ll probably find a problem. Low-contrast text — text that doesn’t stand out enough from its background to meet the WCAG threshold — was detected on 83.9% of the top one million home pages, with an average of 34 distinct instances per page, making it the single most common accessibility failure on the web (WebAIM Million, 2026). It has held that top spot for seven years running.

The reason is almost never malice or ignorance about accessibility. It’s design taste. That pale-gray placeholder text, the trendy light-blue link on a white background, the brand teal used for button labels — they all look refined in Figma and fail the moment a real person with aging eyes or a phone in sunlight tries to read them. This guide is about designing a brand palette that keeps its personality and clears the bar.

What “passing AA” actually means

WCAG 2.1 Level AA sets specific, measurable contrast ratios. There are only a few numbers to remember:

  • 4.5:1 for normal body text.
  • 3:1 for large text — defined as 18pt (roughly 24px) or 14pt bold (roughly 18.66px) and up (Understanding SC 1.4.3, W3C).
  • 3:1 for non-text elements: button borders, form-field outlines, focus rings, toggle states, and the meaningful parts of icons and charts (Understanding SC 1.4.11, W3C).

A contrast ratio runs from 1:1 (identical colors, invisible) to 21:1 (pure black on white). It’s calculated from the relative luminance of the two colors, not from how “different” they look to you — which is exactly why eyeballing fails so often. The W3C chose 4.5:1 because it compensates for the contrast-sensitivity loss of someone with roughly 20/40 vision, typical of an 80-year-old (W3C). Your palette isn’t judged by your eyes; it’s judged by theirs.

For a deeper walk through the ratios, the exceptions (logos and disabled controls are exempt), and how to test, see our full color contrast guide. Contrast is just one entry in a long list — the WCAG success criteria cover dozens more.

The mistake that makes the whole thing feel hard

Designers panic because they assume every brand color has to pass 4.5:1. It doesn’t.

A color only has a contrast obligation when it carries information. Body copy, link text, icon glyphs, input borders, error states — those must pass. But your brand color is free to live in a full-bleed hero, a decorative gradient, a 64px display headline (which only needs 3:1), or behind white text it contrasts well against. The constraint isn’t “every hex must score 4.5:1.” It’s “wherever a color means something, it must be legible.”

Once you separate decorative use from functional use, an electric-orange or a deep-magenta brand suddenly has plenty of room to breathe.

Build the palette in layers

Here’s a workflow that produces a distinctive palette that passes on the first try.

1. Keep your brand hue, but make a “text-safe” version of it. Take your primary brand color and darken it until it hits at least 4.5:1 on white (or lighten it until it does on a dark background). You now have a body-text color that’s unmistakably yours — a deep version of your blue or green — rather than defaulting to flat gray-on-white, which is what actually makes sites look generic.

2. Reserve the vivid brand color for big and bold. Use the saturated original for large headings, hero text, and primary buttons, where the 3:1 large-text threshold or white-on-color gives you margin to play with.

3. Pick one accent and pressure-test the pair. Most “designed” looks come from one confident accent, not five timid ones. Check the accent against both your light and dark surfaces.

4. Don’t rely on color alone. Roughly 1 in 12 men and 1 in 200 women have some form of color blindness — around 300 million people worldwide (Colour Blind Awareness). If red and green are your only signals for “error” and “success,” a large share of users can’t tell them apart. Pair color with an icon, a label, or an underline. This is also why link text usually needs more than just a color change.

The tools to keep open while you design

You don’t have to compute luminance by hand. Three tools cover almost everything:

  • WebAIM Contrast Checker — paste two hex values and see instant pass/fail for AA and AAA, normal and large text, plus the non-text 3:1 check. The built-in lightness slider lets you drag a near-miss color a few steps darker until it passes — the fastest way to find a compliant version of your brand hue.
  • Chrome DevTools — inspect any live element and the Styles pane shows its contrast ratio against the computed background, including over images and gradients where a static checker can’t reach.
  • A color-blindness simulator (Chrome’s Rendering tab has one) to preview deuteranopia and protanopia, the common red-green deficiencies.

Test against the actual background a color sits on — not pure white if your section is light gray, and not the swatch if there’s a photo or gradient underneath. Real backgrounds are where passing palettes quietly fail.

Why this is worth doing properly

Two reasons, beyond the obvious one of more people being able to read your site.

First, it’s the cheapest legal risk to retire. Website accessibility lawsuits keep climbing — over 3,100 were filed in federal court in 2025, up 27% on the prior year (Seyfarth, ADA Title III). Because low-contrast text is so common and so easy for a plaintiff’s tester to flag, it’s a frequent line item in ADA demand letters. Passing contrast won’t make you immune — it’s one criterion among many — but it removes an obvious, well-documented target. (None of this is legal advice; talk to an attorney about your own exposure.)

Second, contrast is something you have to fix in the design system itself, in the real CSS variables and tokens. This is exactly where an accessibility overlay falls down: a bolt-on widget can’t tastefully re-pick your brand palette, and forcing high-contrast mode tends to wreck the design it’s supposed to protect. Getting it right is hand work — which is why our remediation service fixes color decisions at the source rather than masking them.

If you want to know how your current palette scores before touching a single hex value, run a free accessibility scan — it’ll surface every low-contrast element on the page in a couple of minutes.