What do you do when a brand color fails contrast without changing the brand?

By TechCompare · Updated · How we check

Brand exemptions stop at logos and logotypes, so a brand color used for text has to pass the normal rules. Use a darker shade of the same hue for text and keep the original for fills with dark text on top.

A brand color can look right in a logo and still fail as text. The exemption covers logos and brand names, not a brand color used for a link, a label or the text on a button. This page checks three illustrative colors, a blue, an orange and a yellow, and gives each one a failing pair and a fix that doesn't require a new brand color.

WCAG level
WCAG AA
Minimum contrast (4.5:1+)
Example ratio
3.3:1
#4A90E2 on #FFFFFF
Category
Practical Tips
Accessibility knowledge base

How this is calculated

The 1.4.3 Contrast (Minimum) criterion says "Text that is part of a logo or brand name has no contrast requirement." The Understanding page draws the line at logos: "Beyond logos and logotypes, text that has insufficient contrast due to corporate identity or brand guidelines is not exempted from the requirements of this criterion." A brand color on a link, a label or button text therefore has to pass. A filled button or icon also falls under 1.4.11 Non-text Contrast when its color is the only visual sign that the control exists.

Start with a blue, #4A90E2. On white it reaches 3.29:1, which misses 4.5:1 for normal text but clears 3:1 for large text and for a fill that needs 3:1. Keep it as a fill and put near black #1A1A1A text on it. That pair reaches 5.29:1 and passes for normal text. White text on that fill reaches 3.29:1, which misses 4.5:1 for normal text. For text and links on white, use a darker shade of the same hue. Both blues sit at a hue of about 212 degrees. #2F6DB5 reaches 5.28:1 on white and passes for normal text.

A brand orange like #FF6B35 fails even the 3:1 bar on white, at 2.84:1. The fix, #C2410C, reaches 5.18:1 on white, and white text on it gets the same ratio, so both pass 4.5:1. The two oranges sit at hues of 16 and 17 degrees, which is nearly the same hue. Yellow works better as a fill than as text. #E8A317 reaches only 2.17:1 on white, but #1A1A1A text on it reaches 8.02:1, which clears the 7:1 AAA level.

Verdict

Give each brand color a shade that's safe for text and a dark text color for its fills. Keep the untouched brand value for logos, illustrations and large decorative areas, and store every value as a design token, as the accessible palettes page describes. Check each new pair with the tool before it ships.

More Contrast scenarios

Frequently asked questions

Is my logo exempt from contrast rules?
Logo text is exempt from the text rule, which covers logos and brand names. If the logo also works as a link, the Understanding 1.4.11 page encourages choosing a variant with enough contrast.
How much darker does a brand shade need to be?
There's no fixed percentage, so check the ratio. Adjust the shade until it reaches 4.5:1 for normal text on the background it sits on, or let the Suggested Colors card in the Contrast Checker find the nearest shade with the same OKLCH hue. In this example the blue went from 3.29:1 to 5.28:1 on white, and its hue stayed at about 212 degrees.
Can I keep a brand color for buttons?
Yes, if each pair passes. A blue fill reaches 3.29:1 on white, which clears the 3:1 bar for a control with no other visual sign. The label is text, so it needs its own 4.5:1 check against the fill. For how controls are judged, see the button and icon border page.
Do I have to change the brand color itself?
No. The original stays for logos, illustrations and large decorative areas. The darker shade is a text color that sits next to it in the token set. Whether a brand team accepts a darker text shade is their call, so bring them the ratio numbers.