Accessible contrast ratio vs. corporate identity g

问题:

Following up on a question asked here regarding contrast ratio requirements for WCAG AA, I'm trying to figure out the best solution for a conflict between WCAG guidelines and the corporate identity guidelines of the product I'm designing for.

Throughout the product's UI, the brand's primary color is mostly applied for buttons. The combination of light text with the brand's primary color results with insufficient contrast ratio. For achieving sufficient contrast, I tried darkening the button label text color or the background color of the button (see attached screenshot). However, changing the color of the brand won't be an acceptable solution for various reasons.

Apart from using dark text for button labels, how else could I achieve sufficient contrast ratio without modifying the brand's primary color?

回答1:

You can't achieve sufficient contrast for AA level without changing the background color, or using a darker text.

In order to find the good matching color, you have to convert your color to HSL color space instead of RGB. Then conserving the Hue and Saturation you can change the luminosity and test the color.

This way you can find a color like #0F7FAD which will match your initial color, just being a little darker.