Adjust the color contrast based on the background color #589
Labels
:accessibility
Accessibility related issue
:annotation
Annotation (line, rect, text) related issue
bug
Something isn't working
:colors
colors related issue
enhancement
New feature or request
Impact:Medium
kibana cross issue
Has a Kibana issue counterpart
:TSVB
Kibana TSVB related
:xy
Bar/Line/Area chart related
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:
Theme
js object, including the text color of the legendSettings
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:
chart
element in the playground cssExpected 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
Checklist
Kibana Cross Issues
listkibana cross issue
tag is associated to the issue if any kibana cross issue is presentThe text was updated successfully, but these errors were encountered: