How to Choose Accessible Brand Colors That Pass WCAG

Most brand palettes are chosen on a big monitor, in a presentation, next to a logo. Then they meet a website and something breaks: the signature color is too pale for body text, the button label disappears, the link looks like plain text. Choosing accessible brand colors is not about giving up the color you love. It is about deciding, before launch, which jobs each color is allowed to do, and testing every pairing against the numbers the web is actually judged by.

Below: the two contrast rules that matter, a real palette run through them, and the role table I hand to developers.

The two contrast rules that decide whether a palette works

The Web Content Accessibility Guidelines (WCAG) are the standard most accessibility rules point to. Two of its success criteria do almost all the work for brand colors.

Text contrast: 4.5:1, or 3:1 for large text

Success Criterion 1.4.3, Contrast (Minimum) says text needs a contrast ratio of at least 4.5:1 against its background. Large text only needs 3:1, and W3C defines large as 18 point, or 14 point bold, which it equates to roughly 24px and 18.5px in CSS.

Two details in that same document change how I work:

• No rounding. W3C says the ratios are thresholds and computed values should not be rounded, so 4.499:1 does not meet 4.5:1. A color that "basically passes" fails.
• Logos are exempt. Text that is part of a logo or brand name has no contrast requirement. Your wordmark can stay exactly as designed. The exemption does not extend to your headlines, buttons or body copy just because they use brand colors.

Non-text contrast: 3:1 for buttons, fields, focus rings and icons

Success Criterion 1.4.11, Non-text Contrast asks for 3:1 against adjacent colors for the visual parts needed to identify interface components and their states, and for parts of graphics needed to understand the content. In practice that means a button's shape against the page, a form field's border, a focus outline, a checkbox's checked state and a meaningful icon.

The nuance people miss: 1.4.11 is about the component against what surrounds it, not the label inside it, which is text and falls under 1.4.3. A brand-colored button can pass 1.4.11 against a white page and still fail 1.4.3 because the white label on it is too faint.

These rules are not academic. The 2026 WebAIM Million report found low-contrast text on 83.9 percent of the one million home pages it tested, with an average of 34 instances per page, and it was the most commonly detected issue. It is also the easiest failure to prevent, at the palette stage.

Both criteria are Level AA in WCAG 2.2, the middle of its three conformance levels. If you run a home health or care agency, the bar can be more specific than "good practice," and I cover what applies to that sector in my guide to home health website accessibility.

A real palette, run through the numbers

Rules are easier to see on a real brand. For PrintVision, a printing and packaging house in Lahore, the palette is the printing process itself: cyan #00AEEF, magenta #EC008C, yellow #FFF200 and a charcoal key #231F20 instead of pure black. It is a great identity, and it is also a palette that would fail on a website if every color were treated the same way. Here is what each pairing measures using the contrast ratio formula WCAG defines, which you can reproduce in the WebAIM Contrast Checker. I show ratios to two decimals here, but judge pass or fail on the unrounded value.

A few things jump out, and they generalize to almost any brand:

• The same color passes or fails depending on the ground. Yellow is useless on white and excellent on charcoal. Cyan is the reverse of what most people guess: it reads well on a dark ground and fails on white even for a button outline.
• Saturated is not the same as dark. Magenta looks intense, but at 4.25:1 on white it misses the body text threshold. It is fine for a 24px headline and fine as a button shape, not for a paragraph or a small link.
• White labels on bright buttons are the trap. A white label on a magenta button is the same 4.25:1 pairing, so a normal-sized label fails. A white label on cyan is 2.53:1.

None of this argues against a bright palette. PrintVision's identity leans on a charcoal ground, exactly where its brightest plates perform best. A palette just needs rules about where each color can sit.

How I choose accessible brand colors, step by step

1. Pick the brand color for feeling, then test it immediately

I still choose the hero color from strategy: what the business should feel like, and what competitors look like. I cover that side in how I design a brand identity system. The difference is that the moment a candidate color exists, I test it against white, against the darkest neutral and against the lightest neutral. Two minutes, and I know which roles it can hold.

2. Build a text-safe variant instead of changing the brand color

If the signature color fails as text, I don't usually redesign it. I add a darker sibling for text and small UI, and keep the original for large areas, illustrations and the logo. With PrintVision's cyan as the example: #00AEEF measures 2.53:1 on white, while a deeper cyan such as #0077A8 measures 5.0:1 on white. For magenta, #C2006F measures 5.96:1 on white. To most people they read as the same brand family, and they can carry links and button labels. The Lightness slider in the WebAIM checker is a fast way to find the step where a shade crosses 4.5:1.

The trade-off: a darker variant that passes on white often fails on a dark background. #0077A8 measures 3.26:1 against the charcoal key, so it would fail as body text there. That is why I document variants per background, not per color.

3. Give every color a job, and write down where it can't go

A palette is easier to keep accessible when each color has a role. Here is the shape of a role table I'd hand over with a palette like PrintVision's:

The "Never" column matters most. It is what stops someone on a busy day from setting yellow highlight text on a white flyer page because it "is a brand color." If you're writing a full guideline, the same logic applies to your logo rules, which I go through in my logo design process.

4. Check the states, not just the default

Under 1.4.11, the visual cues that show a state also need 3:1. I check:

• Focus outlines. A focus ring in the brand color must hit 3:1 against the background next to it. On a white page, PrintVision's original cyan at 2.53:1 would not; the deep cyan or the charcoal would.
• Hover states. A hover that only lightens a color can drop text below 4.5:1.
• Selected and checked states. A tab or checkbox that signals "selected" only with a pale tint usually fails.
• Disabled controls. W3C exempts inactive components from both criteria, so a grayed-out button can be low contrast. I still make sure it doesn't look identical to an active one.

5. Never let color carry meaning alone

Success Criterion 1.4.1, Use of Color says color can't be the only visual means of conveying information, indicating an action or distinguishing an element. This matters more than people think: the National Eye Institute says about 1 in 12 men have a color vision deficiency, and the most common type makes red and green hard to tell apart.

When I worked on the TradeVision identity, green and red became the palette. That is a perfectly good choice for an identity, but on a website I would never let green mean "available" and red mean "sold out" without a word or an icon next to it. The same goes for form errors shown only in red and charts that rely on a color legend.

Links inside paragraphs are the common case. W3C's technique G183 allows color-only links if the link text has at least 3:1 contrast with the surrounding text, while both still meet contrast against the background. That is hard to hit with dark text and a dark brand color, and the technique itself suggests considering an underline. My default is simple: underline links in body copy and use the brand color as a bonus.

6. Test the real layouts, especially text over images

Swatches on a white artboard lie. The failures I find in reviews are white headlines over photos, text over gradients and pale gray captions. W3C lists background images without enough contrast as a failure of 1.4.3. When a hero puts text over a photo, I either add a solid or semi-opaque panel behind the text or darken the image enough that the lightest area under the words still passes. Then I test with the client's real photo, not the mockup's stock image.

When not to chase higher contrast

Accessibility is a floor, and sometimes teams overcorrect. A few situations where I push back:

• Redrawing the logo. Logotypes are exempt from 1.4.3. Changing a recognized mark to hit a ratio usually costs more than it gains. Fix the colors around it instead.
• AAA everywhere. WCAG 2.2 includes an enhanced Level AAA criterion of 7:1 for text. It is worth hitting for long-form reading, and PrintVision's charcoal on white, at 16.3:1, clears it easily. Forcing 7:1 on every accent and headline tends to flatten a palette into gray, so I treat AAA as a target for body copy, not for the whole palette.
• Decoration. Pure decoration has no contrast requirement. A pale brand shape behind a section is fine as long as nothing meaningful depends on seeing it.

Your accessible palette checklist

1. List every color in the palette with its HEX value, including neutrals and grays.
2. Test each color against white, your darkest neutral and your lightest background. Record the exact ratio, unrounded.
3. Mark each pairing as body text (4.5:1), large text and UI (3:1), or decorative only.
4. Create a darker or lighter text-safe variant for any brand color that fails where you need it.
5. Check white and dark labels on every button color at the size you'll actually use.
6. Test focus rings, hover, selected and error states, not only the resting state.
7. Make sure no status, error, link or chart depends on color alone.
8. Test real pages with real photos, then zoom and look at them on a phone in daylight.
9. Write the role table, including the "Never" column, into your brand guidelines and your site's design tokens.

Frequently asked questions

What contrast ratio do accessible brand colors need?

Under WCAG AA, text needs 4.5:1 against its background, and large text (about 24px, or about 18.5px bold) needs 3:1. Buttons, form borders, focus indicators and meaningful icons need 3:1 against adjacent colors. Ratios are not rounded, so 4.49:1 fails.

Does my logo have to meet contrast requirements?

No. WCAG exempts text that is part of a logo or brand name from the text contrast rule, and W3C's guidance treats logos as exempt from non-text contrast as well. The exemption covers the logo itself, not every headline or button set in your brand color.

My brand color fails on white. Do I need a new brand color?

Usually not. Keep it for large areas, illustrations, the logo and dark backgrounds where it may pass, and add a darker variant from the same hue for text, links and small interface elements. Document which version goes on which background.

Is a contrast checker enough to know my site is accessible?

It tells you a color pair passes. It won't tell you whether links are distinguishable, focus is visible or text over a specific photo is readable. Those need a person looking at real pages.

Want your palette checked?

If you have a palette you love and aren't sure where it will break on screen, I can test every pairing, build text-safe variants and write the role table into your guidelines, or fold it into a full brand and website project. Send me your colors and tell me where they need to work.