Adjust the color contrast based on the background color

[markov00]

Describe the bug
The chart is currently rendered on a transparent background. We have two main themes, one for a light background and one for a dark one.
The issue comes out when the user wants to apply a different color to the background: the existing themes are no longer valid in every case for an AA accessibly point of view.
Moreover, the legend is rendered in html that means that it only currently reflect the colors applied through importing the correct CSS method.

A possible solution is:

• apply colors of the chart only through the Theme js object, including the text color of the legend
• configure the background color through a Settings prop, this will allow us to tweaks the colors for a better contrast, and also return the current WCAG accessibility level if required.

To Reproduce
Steps to reproduce the behavior:

1. Go to the playground
2. Manually change the background color of the chart element in the playground css
3. Apply the light theme or the dark one
4. The text contrast is not sufficiently high with every background color applied

Expected behavior
The light and dark theme should be revisited as a semantic theme, that applies in all possible cases adapting the colors to the background.
A similar approach should be applied to #238

Screenshots
with light theme:

with dark theme:

Kibana Cross Issues

• TSVB does not take into account background color for legend styling kibana#60011

Checklist

• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[rshen91]

I'm wondering if this issue might be resolved with #608?

[markov00]

I don't think so, @rshen91 can you test this to see if it happens on master?

[nickofthyme]

Just to clarify, the idea here is to apply color contrast logic to all the colors, not only text right. So that would include axes lines, tick and labels as well as the series colors themselves?

[markov00]

Sorry I've missed that reply:
@nickofthyme right, we have to apply the color contrast logic when the user applies a specific background color to all static elements in charts axis, ticks, labels, legend text etc. This because we have 2 themes defined for dark and light background but don't cover automatically the issues when using a dark background color on the chart when using a light background color in Kibana. In this particular example, the legend item text reflects the CSS style used in the global Kibana theme

[markov00]

I believe we should close this as not planned. There will be always something that we can't control or that will override this contrast improvement.
What we can provide in the future could be something like a utility to generate or check theme contrast rules, but I believe we should not automatically change theme colors depending on chart backgrounds.