By Mehdi HassanWhat makes brand colors accessible?
Brand colors are accessible when every combination people need to read or use has enough contrast, and when no information depends on color alone. Accessibility isn't a property of a single swatch. It's a property of pairs: text on a background, a button on a page, a border around an input. A bright brand yellow can be perfectly accessible as a background behind dark text and completely unreadable as text on white.
This is the second pass in our framework for how to choose brand colors. The first pass picks colors for personality and category contrast. This pass makes sure those colors survive real use in a website and a product without losing the character you chose them for.
What WCAG color contrast does a brand palette need to meet?
A brand palette needs to meet the contrast minimums in the W3C's Web Content Accessibility Guidelines, which most accessibility audits and legal standards reference. WCAG's contrast minimum asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG also asks for 3:1 for the visual parts of interface components and states, such as input borders, icons and focus indicators.
What you're checking | WCAG AA minimum | Common brand failure |
|---|---|---|
Body text and links | 4.5:1 | Brand color used as link text on white |
Large text (big headings) | 3:1 | Pale brand color on a light hero background |
Button label on button | 4.5:1 for normal-size labels | White text on a bright accent |
Input borders and icons | 3:1 against adjacent colors | Light gray borders that vanish |
Focus indicators | 3:1 against adjacent colors | Brand-colored focus ring on a brand-colored button |
Stricter AAA targets exist too, but AA is the level most teams and most compliance programs work to. Our guide to website accessibility compliance covers which standard applies to which business.
How do you build an accessible color palette from your brand colors?
You build an accessible color palette by turning each brand color into a tonal scale and then choosing which tones do which jobs. A scale gives you room to keep the hue everywhere while moving lightness up or down until each pair passes. Here's the process we follow.
Lock the brand hues
Start from the primary, secondary and accent colors chosen in the personality pass. Don't change the hue yet.
Build a tonal scale for each
Create a range of tones from near-white to near-black for every color, typically around 10 steps, with even visual spacing. Perceptual color spaces such as OKLCH make the steps look more even than plain HSL.
List the real pairs
Write down every combination your site and product use: body text, links, buttons, badges, borders, charts, alerts. Include both light and dark themes.
Test each pair
Run every pair through a contrast checker. Record the ratio and whether it passes the relevant threshold.
Fix with tones, not hues
When a pair fails, move to a darker or lighter step on the same scale. Only change the hue if no step works for the job.
Assign roles and document
Name which tone is for text, links, buttons, borders and backgrounds, and record the tested pairs in your guidelines.
How do you keep brand personality while meeting contrast?
You keep brand personality by separating the brand moment from the working job. Your signature color can stay vivid on large surfaces, illustrations and the logo, while a deeper tone of the same hue handles text and buttons. Buyers recognize the hue, not the exact lightness, so the brand still feels like itself.
- Use the bright tone as a background, not as text. Dark text on a bright yellow or lime surface can pass easily, while the same colors reversed fail.
- Darken the accent for actions. A slightly deeper tone of your brand color usually passes with white labels and still reads as the brand.
- Lean on large type. Headlines at large sizes need less contrast, which gives a lighter brand color room to appear in display type.
- Let neutrals carry body text. Near-black or deep gray text keeps reading comfortable and frees your brand color for emphasis.
- Tint your neutrals. A gray with a hint of your primary hue makes the whole interface feel on-brand without touching contrast.
If you're defining how much each color appears, our guide to brand color palette structure explains the roles and ratios. Personality traits from the first pass still guide which of these tactics fits: a quiet, serious brand might keep vivid color almost entirely out of the product.
How do you design accessible UI states with brand colors?
You design accessible UI states by giving each state a distinct, tested tone and by never using color alone to carry meaning. Hover, focus, pressed, disabled, error and success all need to look different from each other and from the default, for people with full color vision and for people without it.
State | Color approach | Non-color cue |
|---|---|---|
Hover and pressed | One and two steps darker on the accent scale | Cursor change, slight shadow or movement |
Focus | High-contrast ring, often a separate color | Visible outline offset from the element |
Disabled | Lower-contrast neutral tones | Changed cursor and a label explaining why |
Error | Red scale, distinct from the accent | Icon and error text next to the field |
Success and warning | Green and amber scales | Icon and a short message |
Disabled controls are exempt from WCAG's contrast minimum, but low-contrast disabled buttons still confuse people. Explaining why something is disabled helps more than any color. For product teams, our guide to accessible web app design covers forms, tables and charts in more depth.
For example, suppose a fintech brand's signature color is a bright green
Hypothetical example: a fintech startup's brand color is a vivid mint green. On a white background, white button labels on that green fail contrast, and the green as link text is close to unreadable.
Working through the steps, they keep the mint as the hero background and illustration color, with near-black text on top, which passes comfortably. They pick a deeper green, five steps down the same scale, for primary buttons and links; it passes with white labels and still reads as their green. Because green is also the usual success color, they shift success messages to a teal with a check icon, so a successful payment never looks like a button. The brand still feels mint-green, and the product passes its contrast checks.
Why do accessible brand colors matter for ADA audits?
Accessible brand colors matter for ADA audits because low contrast is one of the most visible and easily tested accessibility failures, and your brand palette appears on every page. Fixing contrast at the palette level fixes it everywhere at once, which is far cheaper than patching individual pages after a complaint.
The legal pressure is real. Seyfarth Shaw counted 3,117 federal website accessibility lawsuit filings in the US in 2025, up 27% on the year before. Overlays don't solve the underlying problem either: the FTC's order against accessiBe, finalized in 2025, included a $1 million payment over claims about what its overlay could do. The durable fix is designing accessible colors into the brand and the build. Our guide to accessible web design covers the rest of the checklist.
How do accessible brand colors get into code?
Accessible brand colors get into code as named design tokens that encode the tested pairs, so developers can't accidentally reach for a failing combination. Instead of a token called brand-green, you define jobs such as text-link, action-primary-bg and border-input, each pointing to a tone you've already tested.
This matters most for teams whose product and docs are a big part of the brand, which is why a developer brand usually needs tokens before it needs a brand book. Record tested pairs in your brand guidelines too, so marketing designers making a one-off landing page use the same rules. If you're rebuilding on a new stack, palette tokens are one of the easiest wins to include in the scope, and our Framer to Next.js migration cost guide covers what else goes into a rebuild.
