[Lens] Table Cell Color Opacity Not Taken Into Account

[MichaelMarcialis]

Kibana version:
8.0.0

Elasticsearch version:
8.0.0-SNAPSHOT

Server OS version:
macOS 11.4

Browser version:
Chrome 91.0.4472.164

Browser OS version:
macOS 11.4

Original install method (e.g. download page, yum, from source, etc.):
From source

Describe the bug:
When applying a cell background color to a Lens table visualization, a check is performed to apply a text color that has the best contrast ratio against that background color. Unfortunately it appears that opacity is not taken into account during that check, which can yield unexpected outcomes in both light and dark modes.

For example, if using a dark color with a very low opacity in light mode, the text can become nearly invisible. Similarly, if using a light color with a very low opacity in dark mode, the text will also become nearly invisible.

Steps to reproduce:

1. Turn on dark mode in Advanced Settings.
2. Create a table visualization in Lens.
3. Edit the color.
4. Reduce the opacity of the first color stop to zero.
5. The resulting change will render the text of cells using that color nearly unreadable.

Expected behavior:
In addition to the cell background color, I think we need to also take into account both the opacity of that color and whether the user is in light/dark mode to make the correct choice of table cell text color to apply.

Screenshots (if relevant):

CCing @ghudgins

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[ghudgins]

@stratoula I increased the impact & priority of this since, best I can tell, there's no workaround