Why define opaque color as partially transparent?

Question

Some UX designers on my team feel we should define all of our colours as transparent even when they are used as opaque. I'm trying to understand the pros and cons of this choice.

For example, rgb(128, 128, 128) appears visually equivalent to rgba(0, 0, 0, 0.54) on a white background. Or, in some apps it seems to be rgb(117, 117, 117). Between the two choices (rgb or rgba with 0 < a < 1), my UX team prefers using rgba(0, 0, 0, 0.54) for form labels.

Note: I have no objections to using transparent colors when the usage calls for transparency (e.g., hover state).

Context: We build highly technical, management web apps. All of our web apps have a white background today and don’t tend to layer elements (e.g., no marketing images as backdrops). Now we're looking into providing different app skins: dark, high-contrast, etc. As part of that work, we want to define gradient scales for each of our primary and secondary colours, something like you see in Material UI.

UX Team's Rationale:

Some of the UX designers feel partially-transparent colors help control colour contrast ratios. When I test an example using a contrast ratio tool (see below for sample test results), that doesn't seem to be always true; it depends on the colors selected.

Some UX designers feel a partially-transparent color is a good way to specify when something is disabled.

Studies:

(1) Hues defined as partially transparent vs. hues defined as opaque set against different backgrounds:

(2) Contrast ratio study of two greys visually-equivalent on a white background:

• RGB: rgb(128, 128, 128) gives 3.94 on white and 5.31 on black
• RGBA: rgba(0, 0, 0, 0.54) gives 4.58 on white and 1 on black

(3) Visual study of two greys visually-equivalent on a white background: https://jsfiddle.net/marniea/1q9adxo6/ Shows how partially-transparent colours appear differently depending on the background whereas opaque colours remain the same.

Back to my question...

What advantages are there to using partially-transparent colors when you want an opaque color, assuming the two colors are visually equivalent on a white background?

Related Questions:

1. I'm rewriting my original question that got flagged as "implementation" because I'm not really concerned about implementation, just the theory of opaque vs. transparency for color definition.
2. Related UX SE post: Why isn't primary text full opacity? Answers talk about RGBA helping to enforce standard use of colour. That is, if you start with an RGB colour and use the alpha value to adjust light/dark, you could ensure a consistent colour gradient scale. (Note: That post has a good image showing a colour scale using hex and then the equivalent alpha value beside it: https://i.stack.imgur.com/MWust.png)

Answer 1

Opacity is a cheap method for tints and shades. If you have time, your designers should define color codes for all color states.

The application of opacity (as a word) is best for subduing a background (and really the attention we give to it), rather than being a brand aspect.

If brand is the concern, ask your team to translate that opacity to CMYK for your print applications. Does the interest change? Background color + opacity color = third color. Is that defined? Have you tested potential combinations to ensure your brand doesn't break?

I worked with a brand not long ago that utilized opacities as a way to signify button states. This is fine as it was defined by the brand and not just a "cool" addition. (Plus makes it super easy for coding knowing you apply this one thing to all elements and get the same tint variation for example)

"Some of the UX designers feel partially-transparent colors help control colour contrast ratios" is a valid statement, but again a cheap argument. Plus you're stuck in that color vein. Is that what you want/need?

A note to using alpha to control light and dark: This again, depends on the brand and style guides. Yes, alpha controls the "light/dark", if that's what your style guide determines then your good to go.

Personally, opacities are for overlays, and generally, signify "Ignore What's Under Me" (at least for now). Whatever the color may be, that appears the strongest message.

But, all of this can change if the main goal and application is stylization.

Answer 2

The main reason you should work with opacity or transparency is because there is no way to define colors because colors and contrast change from monitor to monitor. Different displays create vastly different colors out of the same color numbers. There is literally is no way to define a color in digital without viewing the actual color displayed on the actual monitor. The color you're looking at is wrong and so will the color displayed by the users' devices.

Working in opacity is far more precise and natural. You're defining the relations between colors and contrasts, not just trying to define the perceived result. For example, if you're designing red text on a blue background on a well-tuned monitor, none of the colors will be anywhere close when displayed on high-contrast, oversaturated phone displays. The red and blue will be very different. If you define the colors and the opacity of the red over the blue, the color created by the opacity will naturally match other colors created with opacity.

Opacity the natural way to design in digital. It's definitely the natural way to define color in programming. Every color you see in digital displays is created with opacity. Opacity is how programming defines, creates and manipulates color.