1

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?

3 Answers 3

5

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

5
  • These are good examples I can show stakeholders. Unfortunately it is up to them if they want to go 14 bold to keep the orange as is. These are useful. I came to this site with the issues already in place. Thank you for the links.
    – Keano
    Commented Mar 21, 2023 at 21:36
  • "If the secondary color does not pass any of the accessibility requirements, do not use them in elements where those requirements are essential.". I would be cautious of that statement. While I like the suggestion of not using questionable color contrast on essential elements, that does not give you liberty to use low contrast on non-essential elements. Doing so can still cause WCAG failures which could potentially lead to an ADA lawsuit. Commented Mar 22, 2023 at 3:44
  • "If the company has these corporate colors and has used them for years, there is no impediment for it to continue doing so." I'm not sure I understand that statement. If something has been used for years and has been inaccessible for years, it's ok to keep doing so? I don't think that's what you're saying. That would be dangerous. Commented Mar 22, 2023 at 3:47
  • ... unless a corporate image restructuring study requires it. I don't think a DEV can freely change the corporate colors of a company just to fix accessibility issues.
    – Danielillo
    Commented Mar 22, 2023 at 6:15
  • Indeed, I wouldn't advise a dev or designer to change corporate colors. That's a much larger discussion. But that doesn't mean the existing corp colors passes accessibility regardless of how long they've been used. Commented Mar 23, 2023 at 22:56
1

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.

Figma's homepage feat. yellow

6
  • I agree. All I can do is make the suggestions. Thanks again. This all helped.
    – Keano
    Commented Mar 21, 2023 at 23:39
  • To be clear at Normal Text WCAG AA Does 12px text bold at Foreground: #FFFFFF Background: #F76300 pass AA small text or it has to be minimum of 14 bold? pass 4:5:1
    – Keano
    Commented Mar 22, 2023 at 21:12
  • @Keano That would fail at 12px and pass at 14px.
    – Izquierdo
    Commented Mar 22, 2023 at 21:58
  • I believe that would fail to no? I read here:webaim.org/articles/contrast web pages 18 points maps to 24 pixels and 14 points to approximately 18.67 pixels.
    – Keano
    Commented Mar 22, 2023 at 22:08
  • Have you checked out webaim.org/resources/contrastchecker ? They define large text as 14px and bold.
    – Izquierdo
    Commented Mar 22, 2023 at 22:13
0

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>

enter image description here

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.

3
  • So, researching I see that 14pt bold or 18pt normal at 3.1 equals 24px and or 18px or bold. I thought it was pixels. too. What is small text considered at 4.5.1. I am researching and was thrown by the points.
    – Keano
    Commented Mar 22, 2023 at 22:44
  • Though this shows: a11y-guidelines.orange.com/en/articles/font-size-and-colors For standard texts: size less than 24px: contrast of 4.5:1 minimum size greater than or equal to 24px: contrast of 3:1 minimum For bold texts: size less than 18.5px: contrast of 4.5:1 minimum size greater than or equal to 18.5px: contrast of 3:1 minimum
    – Keano
    Commented Mar 22, 2023 at 22:56
  • I'm not sure I follow your comments. The guideline for WCAG 1.4.3 Contrast (Minimum) seems pretty clear. It says the text foreground and the page background must have a 4.5:1 (minimum) contrast except in a few cases. One of those cases is "Large Text" which is defined at w3.org/TR/WCAG21/#dfn-large-scale and which I refer to in my answer. Large text is either 14pt bold or 18pt normal (or larger, in either case). Apologies if I wasn't clear on that. Feel free to ask additional questions. Commented Mar 23, 2023 at 22:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.