elastic-charts
elastic-charts copied to clipboard
[Bullet] current bar style with higher contrast
Depending on the selected colors, the value bar can have a very low contrast.
Here for example, even if the colors are not nice colors, the contrast it pretty low.
I believe we should do something here to improve the visibility of that bar.
We also should remember that the bar can cover both dark and light colors.
Possible suggestions:
- adding a border?
- adding a shadow?
- moving the bar to one side to make it stand out of the bullet?
Should we also consider contrast for the goal and active value tick, as well as the white tick lines?
I believe the tick lines should be always the same color of the background, so even if there is a low contrast with color I feel ok with that. Waiting for @gvnmagni when and what to apply in general. we quickly discussed and a border around the bar could be enough, but applying it just for cases where the contrast is too low
Since we have no control on the color chosen by user, l would suggest to check for ranges color and if at least one color does not pass required contrast values, the progress bar gets a 1px border (same color as ticks) so that we are safe