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.
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
Related guides
Frequently asked questions
Is my logo exempt from contrast rules?
How much darker does a brand shade need to be?
Can I keep a brand color for buttons?
Do I have to change the brand color itself?
Related tools
Color Picker
Pick colors, convert between HEX, RGB, HSL, HSV, OKLCH and CMYK, and find the nearest CSS and Tailwind color.
Use toolJSON Formatter
Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.
Use toolAspect Ratio Visualizer
Visually compare width differences between 16:9, 21:9, and 32:9 monitors.
Use tool