问题
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.
回答2:
I empathize with you, I've struggled many times with trying to meet A11Y guidelines and design language / brand guidelines at the same time. It's not a battle that's easily or quickly won, but I applaud you for working to make the web more inclusive!
An option that has pushed the conversation further for my team in the past was to allow the end-user to choose the version of the site that they need or wish to use.
Do they want high-contrast styling?
Build an option in to replace the stylesheets - and apply the brand colors in different methods.
Other questions that may fit in to the topic area:
Do your users want enlarged or generously spaced text sizes?
What about enlarged UI elements?
How about a colorblind set of stylesheets?
TLDR: UI's are most often not one size fits all, so think about tailoring accessibility offerings in an a-la-carte manner. Let the consumer choose what they need!
Hope this helps, let me know how it's going!
来源：https://stackoverflow.com/questions/57182581/accessible-contrast-ratio-vs-corporate-identity-guidelines