Addendum to color guidelines to address use of opacity

[bobbinrobyn]

• [ ] Write a few sentences as guidelines
• [ ] Create visual examples

[bobbinrobyn]

@IBM-Watson/design-acceleration: Thoughts on this blurb to address opacity? It'll live on the color guidelines page.

Opacity describes the transparency or the ability to “see through” a foreground color to the color behind it. The colors in our palette display at 100% opacity by default. In some applications, however, it may be appropriate to reduce the opacity of a hue in order to render a lighter color. Adjusting opacity should be done thoughtfully and infrequently; we recommend it only for cases when none of the colors in the IBM Design color palette can suitably produce the desired visual effect.

[ryanbrownhill]

I think that blurb is good. I just would refine - "In some applications, however, it may be appropriate to reduce the opacity of a hue in order to render a lighter color."

Sometimes the background is dark and would render the color darker rather than lighter.

Maybe we should highlight on the additional visual hierarchy opacity might provide in some use cases like data visualization?

[bobbinrobyn]

Good call @ryanbrownhill. Maybe it could say "to render a more muted color"?

[bobbinrobyn]

And yes, I'm going to make a couple of examples that show when/why you might use opacity!

[ryanbrownhill]

"Muted color" :+1:

[kathrynmcelroy]

Use of "hue" in the third line is a bit strange. Otherwise :+1:

[bobbinrobyn]

This changes from 100% to 80% opacity on hover. Is this the type of situation we want to recommend as a candidate for opacity?

[ryanbrownhill]

I am happy with that use case.

[ryanbrownhill]

Accessibility color testing tool: https://www.joedolson.com/tools/color-contrast.php?type=hex&color=%23c0ffee&color2=%23bada55&alpha=1

[bobbinrobyn]

Hmmm... we're running into the issue of how you test accessibility when a semi-transparent color is used as the background color. All of these color contrast tools are only able to accurately gauge accessibility when it's the foreground color that's semi-transparent.

[ryanbrownhill]

Tried the IBM tester... but it doesn't do hover states as well...

[ryanbrownhill]

Also I am going to put this example here so it doesn't get lost in the slack.

Button Hover Example for Opacity usage: http://codepen.io/anon/pen/waKaLE

[ryanbrownhill]

As per conversation on slack:

I think opacity needs to be addressed as something to use only in the rare case and not use it for anything else. It also is not addressed anywhere in the IBM Design Language which I think we should provide an opinion on it. I agree though I am also on the fence about the subject but I think its important that we provide the acceptable use cases. Maybe we also include when not to use opacity?

Some possible acceptable use cases:

• Hover States
• Inactive States

[poofichu]

@ryanbrownhill 100% agreed with that.

[britanyponvelle]

It seems as though the only way to test this is to generate a new tint or shade in a tool like Illustrator, and use that number as a hover state.

[bobbinrobyn]

Sorry, the hover is a little wonky in this gif, but here's an example of how we could show reduced opacity on hover and in an inactive state. I'm getting more concerned about accessibility being a hurdle – because it does matter for the hover state, but it doesn't matter for things that are inactive. I would anticipate that it's going to be hard to convince designers to rigorously check their color contrasts...

[Snugug]

I think we need to brainstorm ways to get designers to care about accessibility (including, and especially color accessibility) because it's of the upmost importance to what we're shipping.

That being said, maybe instead of working with transparency (which is super tricky to work with dynamically and will change depending on if we have a dark or light background, or if something is on a colored background) we actually change the color? What we're seeing here isn't transparency per se, but rather tinting. We should pick a tint above the given color for hover, and maybe move to a very light grey or warm-grey for inactive

[bobbinrobyn]

We're waiting on an answer from Adam & Hayley, plus we could probably spend some time talking about this as a time. All of that to say, this is on hold until after May 19.

Here's the latest on my little codepen buttons: http://codepen.io/anon/pen/waKaLE