The first time most founders hear about WCAG contrast ratios is when a customer emails to say they can't read the website. Or when an accessibility audit comes back red. Or when a sales prospect mentions that procurement requires it. By then, the brand colors are set, the website is built, and the fix is expensive.
It doesn't have to go this way. Picking brand colors that pass WCAG accessibility from the start adds maybe 30 minutes to your color decisions. Here's the practical guide. Without the design jargon.
What WCAG actually requires
WCAG (Web Content Accessibility Guidelines) sets specific contrast ratios that text must meet against its background to be considered legible. The ratios are calculated from the relative luminance of the two colors. Basically, how bright each one is, perceptually.
The two levels that matter for most brands:
- AA (the practical baseline): 4.5:1 for normal text, 3:1 for large text (18pt+ regular or 14pt+ bold)
- AAA (the higher standard): 7:1 for normal text, 4.5:1 for large text
Most brands target AA. AAA is required only for specific contexts (government sites, regulated industries, public sector). If you're aiming for AAA, you're cutting your color palette flexibility a lot. Most fashionable brand colors can't pass it on white backgrounds without significant darkening.
The simplest test: do your brand colors pass on white and black?
Start with the basic check: does your primary brand color produce 4.5:1 contrast when used as text on white? And does white text produce 4.5:1 contrast on your primary brand color as a background? These two tests catch most problems.
You can do these tests in 30 seconds with a free tool. Webaim Contrast Checker (webaim.org/resources/contrastchecker) takes two hex codes and tells you the exact ratio plus pass/fail at each WCAG level. Pop in your colors. If they don't pass AA, adjust.
Specific patterns that fail commonly:
- Bright orange/coral text on white. A standard coral like #FF5B3A is about 3.9:1 on white. Fails AA for normal text but passes for large text. The fix: darken to around #C73D1F for AA compliance, or use the bright coral only at 18pt+ headlines.
- Yellow text on white. Almost always fails. Yellow text needs a very dark background to work.
- Medium gray text on light gray background. Common in "minimalist" design. Often fails. The contrast can drop below 4.5:1 depending on exact shades.
- Light blue or sky-blue links. Many startup brand blues fail on white. You need a deeper blue (think Stripe purple, not Twitter blue) for AA compliance.
The contrast pair strategy
The fix isn't always darkening your brand color until it passes. That can make the brand feel duller. The better approach: define your brand color in two versions. One for decoration, one for text.
For example, at Vellem:
- Coral (decorative): #FF5B3A. The "brand coral" used for the dot in the logo, accent backgrounds, fills.
- Coral text: #C73D1F. A deeper coral used wherever text is colored. Passes AA on white at 5.1:1.
One brand color, two contexts. The user sees the same coral identity throughout, but the text version is calibrated for accessibility. This is what most professionally-designed systems do under the hood. They just don't talk about it.
The dark mode challenge
If your site supports dark mode (most should), you have a second contrast problem: colors that work on white often fail on near-black, and vice versa. The same coral that's perfect at #C73D1F on white drops to 3.2:1 on a near-black background. Fails AA.
The dark mode fix: define a third version of the color for dark backgrounds. Continuing the Vellem example:
- Coral (decorative): #FF5B3A. Same in both modes
- Coral text on light: #C73D1F. Passes 5.1:1 on white
- Coral text on dark: #FFA28A. Passes 4.6:1 on near-black
One brand color, three calibrations. Worth the 30 minutes of setup at brand-creation time to avoid the alternative: drift in contrast across light/dark, and accessibility failures you discover after launch.
What about brand decoration (non-text)?
The WCAG ratios above apply specifically to text. For decorative elements that don't carry information. A colored stripe, a brand accent dot, a background watercolor. You have more freedom. Decorative elements technically have no contrast requirement, though good designers still aim for at least 3:1 against their background for visibility.
What about icons and buttons? WCAG 2.1 introduced a 3:1 minimum for "non-text UI components". The buttons, icons, form fields. So a coral CTA button needs at least 3:1 against its background. The text inside the button needs 4.5:1 against the button color.
The 30-minute brand-color audit
If you've already picked brand colors and don't know whether they pass, run this audit in half an hour:
- List your full brand palette: primary, secondary, accent, neutrals.
- Test every color as text on white (your typical light-mode body background). Note pass/fail.
- Test every color as text on near-black (#0A0A0B or #111). Note pass/fail.
- Test white text on every color used as a fill or button background.
- For any failure, define an adjusted "text" version of the color that passes.
Write down the adjusted values somewhere your team can find them. This becomes part of your brand documentation. Whenever someone uses one of these colors for text, they pick the text version. The decorative version stays untouched.
This isn't an accessibility compromise. It's professional brand work. Every major design system (Material, Apple Human Interface, IBM Carbon, Atlassian, Polaris) does exactly this. The brand identity is a system, not a single hex code, and the system handles the messy reality of contrast across contexts.
Spending 30 minutes on this saves you from the accessibility audit, the customer complaint, the procurement rejection, and the redesign. It also makes your brand work harder for the customers you have. Including the ~8% of men with some form of color vision deficiency, and the increasing number of users on aging displays in suboptimal lighting.
Your brand kit, ready in 10 minutes.
Five quick taps. Free preview before you pay.
Start building free →