I am currently working to try to incorporate text accessibility into the visual design of a suite of SaaS products, which has primary cross product and product feedback colors and a variety of product specific accent / secondary colors. Because we are SaaS, for our customers, we also allow them to select brand colors that are used for certain elements in the pages configured by the customer that are shown to the end users.
One of those brand elements are our action buttons and some page banners, so to make sure we maintain accessibility, we use blank text and only allow customers to choose brand colors that have a contrast high enough to achieve a contrast ratio of 1: 4.5. Therefore, the white text is a restriction here.
We also use the angular material as the basis for our own components, and for the accessibility of the text, they do what Google's material does, which is simply to automate the use of white or black text with a certain transparency, according to the hexagon used. for the container. Always maintain a minimum contrast ratio of 1: 4.5.
But If we did that, we will use white text for some buttons in parts of the user interface that are agnostic of the client's brand. [e.g. a client dashboard that shows multiple clients] and, potentially, use white or black text for other buttons that are branding elements for the specific parts of the client's user interface [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 have to be one thing.
My current fight
So with those limitations in mind, my current struggle is trying to find a new primary blue that works with white text. This is our primary agnostic color for the client, which is canceled with the use of a brand color.
Our current hex is 3E99D8 (HSL 204.5 °, 66.4, 54.5), which is fine for use with large-scale text, since the contrast with white is 3.1, but obviously we do not want to use action buttons with 24px / 18pt not in bold or ~ 19px / 14 pt text sizes in bold, since our body copy is a regular font of 16px / 12pt.
In a similar way, for our market, we need that this primary color is still blue, given our vertical / matter / marketing / etc.
Note: I am using HSL while exploring alternatives only because it is easier to work with, although RGBA would give me more colors to choose from.
Exploring Alternative Colors
So, so far, I have tried to increase the saturation, since 3E99D8 is not 100% saturation, but that does not help to increase the contrast with the white text. If I increase the saturation, I have to decrease the luminosity, but if I decrease the saturation, the color becomes more gray than blue, since when changing the saturation only the amount of tone in the color is added or subtracted, which effectively means that & # 39; m similarly, add or subtract equal amounts of black and white in color.
I can increase the contrast easily by making the 3E99D8 darker, going from a brightness value of .55 to a brightness value of .43, which gives me the # 257bb7. However, there have been some comments that this is a blue too dark and too different.
So, finally, I've tried using different hue values completely, but because of that, it makes finding a solid threshold for brightness and saturation values problematic, since a different hue will have its own minimum saturation values and slightly different brightness to meet. a minimum contrast of 4.5.
This also means that changing any other color in our color palette to make it accessible also becomes problematic, since there is no way to easily maintain a constant perceived brightness throughout the palette, since different shades with the same perceived brightness may have a saturation and a luminosity very different values.
From some experiments with Colorable, I discover that the tones closest to the pure blue (H = 240) can have a higher value of luminosity and a lower saturation and still achieve the minimum contrast, but the blues are closer to the pure green (H = 120), they have to be darker and less saturated for adequate contrast.
I am limited by reducing saturation in any way, since below 50% saturation, the color becomes more gray than blue, but at 100% saturation, I have to maintain a darker luminosity value, since the color it becomes much brighter, and obviously it has to keep the luminosity below 60%, since any lighter element is too white to maintain the minimum contrast. So, at this point, I'm somewhat blocked when it comes to finding a new blue that is close to 3E99D8 but still accessible with white text.
So, now for my questions:
- Can someone explain in simple terms why pure green and pure blue (values of 120 and 240 shades, 100% saturation, 50% brightness) have different contrast ratios with white, especially if white is supposed to It is composed of equal amounts of blue, green, and red?
- How can I proceed with the systematic attempt to find a blue close to 3E99D8 that has contrast with the white text, but is not drastically different?
- How could I improve or worsen this exploration if I try to use another color model? Is it even possible to systematically explore this with other color models?
- Is this exaggeration completely and should I push for # 257bb7 to become our new primary blue?