0

Background:

I'm currently working with trying to bring text accessibility into the visual design of a SaaS product suite, which has cross-product primary and system feedback colors and a number of product-specific accent/secondary colors. Because we're SaaS, for our clients, we also permit them to select brand colors that are used for certain elements on client-configured pages shown to end-users.

One of those brandable elements are our action buttons and some page banners, so to make sure we maintain accessibility, we use white text and only allow clients to choose brandable colors that have high enough contrast to meet a 1:4.5 contrast ratio. So, white text is a constraint here.

We also use Angular Material as a base for our own components, and for text accessibility, they do what Google Material does, which is to simply automate the use of white or black text at a certain transparency depending on the hex you use for the container to always maintain a minimum contrast ratio of 1:4.5.

But if we were to do that, we're using white text for some buttons on parts of the UI that are client branding agnostic [e.g. a client dashboard that shows multiple clients] and potentially using white or black text for other buttons that are branded elements for client specific parts of the UI [the client specific pages, where a client company can configure custom content for their end-users and where we'd show brand colors]. So white labels has to be a thing.

My Current Struggle

So with those constraints in mind, my current struggle is trying to find a new primary blue that works with white text. This is our client agnostic primary color, which is overriden with the use of a branded color.

Our current hex is 3E99D8 (HSL 204.5°, 66.4, 54.5), which is fine to use with large-scale text, since it's contrast with white is 3.1, but we obviously don't want to use action buttons with 24px/18pt nonbold or ~19px/14 pt bold text sizes, since our body copy is 16px/12pt regular font.

Similarly, for our market, we need this primary color to still be blue, given our verticals/subject matter/marketing/etc.

Note: I'm using HSL while exploring alternatives only because it's easier to work with, even though RGBA would give me more colors to pick from.

Exploring Alternative Colors

So, thus far, I've tried increasing the saturation, since 3E99D8 isn't 100% saturation, but that nothing to help increase the contrast with white text. If I increase the saturation, I have to lower the lightness, but if I lower the saturation, the color becomes more grey than blue, since changing the saturation only either adds or subtracts the amount of hue in the color, which effectively means I'm similarly adding or subtracting equal amounts of black and white in the color.

I can increase the contrast easily by making 3E99D8 darker, going from a .55 lightness value to a .43 lightness value, which gives me #257bb7. However, there has been some feedback that this is too dark and too different a blue.

So, lastly, I've attempted to use different hue values entirely, but because of that, it makes finding a solid threshold for the lightness and saturation values problematic because a different hue will have it's own slightly different saturation and lightness minimum values to meet a minimum contrast of 4.5.

This also means changing any other colors in our color palette to become accessible also becomes problematic, since there's no way to easily maintain a consistent perceived brightness across the palette, since different hues with the same perceived brightness may very well have very different saturation and lightness values.

From some experimentation using Colorable, I'm finding that hues closer to pure blue (H=240) can have a greater lightness value and lower saturation and still meet the minimum contrast, but blues that are closer to pure green (H=120), have to be darker and less saturated for adequate contrast.

I'm limited by lowering saturation either way, since below 50% saturation, the color becomes more grey than blue, but at 100% saturation, I have to keep a darker lightness value, since the color becomes so much brighter, and obviously I have to keep lightness below 60%, since anything lighter is too close to white to keep the minimum contrast. So, at this point, I'm kind of blocked when it comes to finding a new blue that's near 3E99D8 but still accessible with white text.

So, now for my questions:

  1. Can anyone explain in layman's terms why pure green and pure blue (120 and 240 hue values, 100% saturation, 50% lightness) have different contrast ratios with white, especially if white is supposed to be comprised of equal amounts of blue, green, and red?
  2. How can I proceed with systematically trying to find a blue close to 3E99D8 that meets contrast with white text, but isn't drastically different?
  3. How could this exploration improve or worsen if I try to use another color model? Is a systematic exploration of this even possible with other color models?
  4. Is this overkill entirely and I should just push for #257bb7 to become our new primary blue?
1

The accessibility guideline of "WCAG 1.4.3 Contrast (Minium)" does indeed require a 4.5:1 minimum contrast (for text below 18pt, or 14pt bold) but the formula used to calculate the ratio is based on the color's luminosity, and a percentage of the red, green, and blue values are used so they're not used equally, which is why blue and green would have different values.

Roughly 21.25% of the red, 7.25% of the green, and 71.5% of the blue are used in the formula. (It's a pretty gnarly formula)

(Fun fact, the ISO recommends that the minimum contrast ratio for normal 20/20 vision should be 3:1. Someone with 20/40 vision has a contrast sensitivity loss of 1.5. So to cover a wide audience, the loss of 1.5 is multiplied by the 20/20 ratio to get 4.5:1)

There are lots of contrast ratio checkers online. Here's one example: https://webaim.org/resources/contrastchecker/.

The nice thing about that checker is you can adjust the color with a slider to get a ratio closer to 4.5. In your case, with #3E99D8, I can make the blue slightly darker to #257AB6 and get a 4.63 color ratio. You could probably fine tune it to get exactly 4.5 but keep in mind that the WCAG recommendation is a minimum. The higher the contrast, the easier it will be for more people to read it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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