elastic-charts icon indicating copy to clipboard operation
elastic-charts copied to clipboard

[Bullet] current bar style with higher contrast

Open markov00 opened this issue 1 year ago • 3 comments

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?

image

markov00 avatar Mar 25 '24 08:03 markov00

Should we also consider contrast for the goal and active value tick, as well as the white tick lines?

nickofthyme avatar Mar 25 '24 20:03 nickofthyme

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

markov00 avatar Mar 27 '24 08:03 markov00

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

gvnmagni avatar Mar 27 '24 10:03 gvnmagni