Accessibility question. Company has secondary brand color (orange) that doesn't pass any requirements. Only option change color?

Question

The company I work for uses dark blue as the main primary color and orange as the secondary color. They have used it for years. It doesn't pass any accessibility requirements. We can't go darker since it looks rust and again isn't the secondary brand orange. I suggested gold which works as a replacement. Has anyone ran into similar issues? Is there another way to approach this?

Answer 1

A color is never an impediment, but an opportunity for a good creative development

The answer is very simple

1. If the secondary color does not pass any of the accessibility requirements, do not use them in elements where those requirements are essential.
2. If the company has these corporate colors and has used them for years, there is no impediment for it to continue doing so, unless a corporate image restructuring study requires it.

And a third question/answer, this is on a personal level:

Question: Is there any color that without having passed the accessibility requirements is prohibitive for corporate use?

Answer: no, absolutely all colors are functional, you just have to know how to use them.

Here are some examples of companies using orange as their corporate color:

ING, Nickelodeon, Fanta, Gulf Oil

Answer 2

The rule of thumb in this situation is to use the accessible dark blue color for the elements that need accessible contrast (like buttons) and use the orange for decoration. Your secondary buttons don't need to be orange just because it's your brand's secondary color; they can be white with the brand blue as an outline.

Your orange color could provide pops of color where you'd want to draw the eye. Like Danielillo said, it's an opportunity to be creative.

Answer 3

Do you have examples and specific RGB values for the orange? Most shades of orange will pass accessibility contrast if used with black or dark colors. For example, black text on an orange background for a button. Depending on how dark the dark blue is, it might also pass.

Here are a few examples.

<button style="background-color: #F76300; color:black">foo</button>
<button style="background-color: #F76300; color:darkblue;">foo</button>
<button style="background-color: #F76300; color:white">foo</button>

The first one is black text (#000000) on an orange background (#F76300). The minimum contrast required by WCAG is 4.5:1. (14pt bold or 18pt normal can have a lower contrast of 3:1).

Foreground: #000000
Background: #F76300
The contrast ratio is: 6.7:1

The next one uses darkblue for the text (#00008B) and also passes the WCAG minimum.

Foreground: #00008B
Background: #F76300
The contrast ratio is: 4.9:1

The last one uses white text (#ffffff). This does not pass WCAG for normal size text but does pass WCAG for "large" text (14pt bold or 18pt normal).

Foreground: #FFFFFF
Background: #F76300
The contrast ratio is: 3.1:1

The values of your specific dark blue and orange will have different contrast values but there's a good chance they'll be ok.