How to Pick Brand Colors That Don't Break Accessibility

You spent weeks picking the perfect brand colors. A soft coral as the primary. A sunny yellow accent. Light gray supporting text that feels airy and modern. Your designer mocked everything up in Figma. The brand looks gorgeous on the pitch deck. Then your first user with low vision visits your website and cannot read a single button.

This is not a rare edge case. It is one of the most common accessibility failures on small business websites, and it almost always traces back to decisions made months earlier when nobody was thinking about accessibility yet. By the time the site is built, your brand colors are printed on your business cards, applied to your logo files, and specified in every page template. Fixing the problem means either redesigning the brand or accepting that parts of your site are unreadable for a meaningful slice of your audience.

This guide is for the moment before all of that. If you are about to pick brand colors, or if you have picked them and are not sure whether they will hold up, this walkthrough will help you choose colors that feel like your brand and also meet the contrast requirements of WCAG 2.1 AA. You do not need to be a designer or a developer to follow it. You just need a color wheel, a free contrast checker, and about an hour.

Why Brand Colors Are an Accessibility Decision

When people talk about “accessibility,” they often mean adding alt text, fixing forms, and making sure keyboard navigation works. Brand colors feel like a different conversation, a purely aesthetic one. But color choices drive three separate accessibility requirements that apply to nearly every business website.

First, text contrast. WCAG 2.1 requires that body text have at least a 4.5:1 contrast ratio against its background, and large text (18px bold or 24px regular) needs at least 3:1. If your brand’s primary color is the text on your buttons, the white background of your button, the link color on your blog, or the color of your headings, it is subject to this requirement.

Second, interactive element contrast. WCAG 2.1 also requires a 3:1 contrast ratio for interactive user interface components against adjacent colors. That means button borders, icon buttons, form field outlines, and focus indicators all need to meet a ratio.

Third, color as information. If you use color alone to convey meaning, for example red for errors and green for success, users with color blindness or users reading in grayscale modes cannot tell the categories apart. Brand colors paired with status indicators are a common source of this problem.

Most small businesses fail on the first requirement. Their brand palette looks fine on whiteboards, but when applied to real product pages, the text-on-background combinations do not have enough contrast.

The Palette You Actually Need

Before picking colors, understand what roles a real-world brand palette plays. Most small businesses try to cover all of this with three colors. You usually need five to seven.

Primary color: The dominant brand color. Shows up on the logo, hero sections, and key CTAs. Does not usually need to be the button color.

Primary contrast color: A darker or more saturated version of the primary. This is what you put on buttons where the button label has to be readable. If your primary is a soft color, this is the darker sibling that actually has contrast.

Secondary color: Used for accent elements, illustrations, and variety. Often a complementary or analogous color to the primary.

Text colors: One for body text (usually near-black) and one for secondary text (usually mid-gray). These are often not part of what clients think of as “the brand” but they appear on every page.

Background colors: One pure white or near-white, one mid-tone for sections, one dark if you use a dark mode or dark footer.

Feedback colors: Success (green), error (red), warning (yellow), info (blue). These can be adjusted to fit your brand temperature but must be distinguishable from each other.

A five-color palette of “coral, yellow, cream, charcoal, white” does not cover all of these roles. Adding a darker coral and a deeper charcoal for text gives you the flexibility to actually pass contrast tests without losing brand identity.

Pick Your Colors in HSL, Not Hex

Most people pick colors by staring at hex codes until something looks right. Hex is a bad tool for reasoning about accessibility. You cannot tell by looking at #E8B4A0 whether it will pass contrast against white, and tweaking it feels random.

HSL is a better mental model. Every color breaks down into three values: Hue (the color family, like red or blue), Saturation (how vivid it is), and Lightness (how close to white or black it is). Accessibility problems almost always come from the Lightness value being wrong. A coral that fails contrast against white almost always passes when you reduce its lightness by 15 to 25 points.

When building your palette, pick the hue you want from your brand feelings first. Then adjust saturation to match the energy you want (high for vibrant, low for muted). Then adjust lightness specifically for each role the color plays. Your hero-section version can be light and airy. Your button-label version needs to be darker, but it is the same hue, so it still reads as “the brand.”

Most design tools let you switch the color picker from hex to HSL. Use it.

Build Your Palette in Layers

Start with one primary hue. Pick the hue you love most. Saturate it until it matches the mood of your brand.

Now build three versions of that hue: a light version for large backgrounds and illustrations, a medium version for accents and secondary buttons, and a dark version for text and primary buttons. In HSL, the dark version should have a lightness value somewhere between 30 and 45. The medium should be around 55 to 65. The light version can be 80 or higher.

Test the dark version against white. It should pass 4.5:1 for body text. If it does not, darken it further until it does. This dark version is the one you will use on any button, link, or inline text styling that involves your brand color. Your designer may push back because it “looks less vibrant.” Show them that the medium version is still available for everywhere that a bit of vibrancy matters and contrast does not.

Repeat for your secondary hue, if you have one.

Now add neutrals. Your body text color should pass at least 7:1 against your background, which is the WCAG AAA requirement. This extra margin gives you headroom when body text sits on lightly tinted section backgrounds or images. Near-black text on white always passes. Very dark gray, like HSL 0, 0, 15, also works and feels less harsh.

Your secondary text color, used for captions, metadata, and placeholder text, should still pass 4.5:1 against the background. A common mistake is using mid-gray (HSL 0, 0, 55) for secondary text on white; this fails at 3.8:1.

Test Every Combination You Will Actually Use

Once your palette is drafted, list every text-on-background combination that will appear on your site. Not just the obvious ones. Include:

  • Body text on white background
  • Body text on your light section background
  • Body text on your dark section background (if you use one)
  • Link color on white background
  • Link color on your light section background
  • Button label on your primary button
  • Button label on your secondary button
  • Error text on error background (if you use a tinted error box)
  • Footer text on dark footer background
  • Caption text on card background

For each, run the combination through WebAIM’s Contrast Checker, which is free and accepts hex codes directly. You need a 4.5:1 ratio for normal text, 3:1 for large text (18px bold or 24px+), and 3:1 for non-text interactive components like button borders.

Write down every combination that fails. For each failure, one of three things must change: the text color, the background color, or the decision to use that combination at all. Often the fix is to pair your brand color with a specifically darker variant just for text and button use.

Common Mistakes That Break Brands

Using brand primary as link color on white backgrounds. Almost every brand has a mid-saturation primary that looks vibrant on a splash screen but fails at 3.9:1 or so against white. Link text gets away with 3:1 only if it is visibly distinguished through underline or another non-color cue. Without the underline, you need 4.5:1.

Light text on the primary button. A coral button with white text usually passes, but a pastel button with white text almost never does. If your primary color is light, your button label has to be dark, not white.

Gray text everywhere. Designers love gray for visual hierarchy, but there is a specific range (around HSL 0, 0, 50 to 65) where gray fails contrast on white. If your “muted” text uses anything lighter than around HSL 0, 0, 42, recheck it.

Relying on color to distinguish form state. Red borders for invalid fields and green borders for valid fields look fine, but someone with red-green color blindness sees no difference. Pair color with icons, text labels, or border thickness.

Brand color as the only focus indicator. If your focus ring is your brand primary and your brand primary fails 3:1 contrast against the surrounding background, keyboard users cannot see where they are on the page. Focus rings need 3:1 against both the element they surround and the page background.

When the Brand Is Already Set

If your brand colors are already trademarked, printed, or otherwise locked in, and they do not meet contrast requirements, you are not stuck. You have two practical paths.

First, adjust how the brand colors are used on the web rather than what they are. Your logo can remain the original brand coral, but your buttons, body copy, and links can use a darker derivative that still reads as “coral” but passes contrast. This is a legitimate and common practice. Design systems at major brands routinely include a “web” color variant that differs slightly from the print version.

Second, use your brand color as a large-format accent rather than as small-text foreground. Brand color as a hero section background or a large headline color can succeed at 3:1 where it would fail at 4.5:1 for small text. This approach lets the brand stay intact visually while the actual text sits in high-contrast neutrals.

Both paths require conscious decisions at the design system level, so document them. Otherwise, every new page will revert to using the brand color directly, and you will relitigate this problem forever.

The Short Version

If you remember nothing else: always keep a darker version of every brand color available for text, buttons, and interactive elements. Test every actual combination with a free contrast checker. Do not use gray lighter than HSL 0, 0, 42 for any text that matters. And never let color alone carry meaning that a user must understand.

Good accessibility does not require ugly colors. It requires one extra hour of thought during palette building. The businesses that skip that hour pay for it later in rework, lawsuits, or simply fewer customers able to use their site.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.