Hey Aurélien Grimaud!

Yeah, I mean opacity. It's quite common in design systems to have set of neutral colors that has identical look and contrast to the full opacity set on pure white, but uses opacity.

This is useful for ghost/secondary buttons for example, which will then retain their contrast on a background whether it's white or slightly darker.

It's also great for action buttons on colored banners/messages (the usual blue/info, green/success etc, where a gray button would look a bit off, but one with opacity visually blends in better, as the hue of the background is mixed in a bit.

Thank you Priit Karu for your clearer context.

Creating color shades by tweaking the opacity is pretty risky if you need to control the contrast between the background and the element above (icon, text, etc). Take your action button: the button background color contrast will depend on the downward background color, which may result in incorrect WCAG 2 and 3 scores.

You can create specific modes for the action buttons according to the related context by selecting the shades from the palette (here is an attachment to illustrate it). You may use the Figma variables, create semantics ones, and then bind them with the shades from the palette.

Aurélien Grimaud I agree with what you're saying, however if there is a limited amount of surfaces used in the system, the WCAG contrast risk can be mitigated.

Here's an example of what I was thinking. The first version has secondary and secondary disabled buttons which use non-alpha neutral colors, the second one is using alpha versions. The second version works much better to the human eye in my opinion.

Priit Karu Okay, I understand your point. Right now, each shade is scored by calculating the contrast ratio between two colors: the background and the foreground element. In your situation, the secondary buttons should achieve a sufficient contrast score across various backgrounds. Our value proposition is to inform users about compliance with WCAG recommendations, so we need to explore further how we can address transparent colors.