elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
372 stars 120 forks source link

feat(all): global, multi-channel prefers-contrast option #1378

Open monfera opened 3 years ago

monfera commented 3 years ago

For accessibility and general readability reasons, a user may prefer increased or sometimes decreased contrast.

CSS introduced the prefers-contrast user preference, and we discussed with @cchaos that EUI could, over time, follow this preference, based on expressed user intent via either of, or some combination of the CSS declaration and JavaScript component properties.

In Charts, we ideally also adhere to this global contrast preference of the user, again, via either of, or a combination of CSS declaration (eg. using HTML/SVG text elements, or reading the CSS value from JS) and our runtime Charts API (a global prefersContrast setting).

This preference is distinct from individual style configurations in that it can, and ought to impact many facets of the visualization. In Charts, increased contrast could mean:

  1. pure black instead of dark grey tick labels (the current mid gray would belong to less contrast tbh.)
  2. maybe 1px larger font
  3. a more legible or disambiguated font eg. Atkinson Hyperlegible (I think we should use disambiguated fonts already as a baseline)
  4. maybe, shadow or outline around the text on filled labels, to make it stand apart more
  5. possibly darkened (on light background) and perhaps marginally thicker axis lines and other annotations
  6. geoms such as lines and bar contours with increased saliency (via more saturated color, or darker/lighter color, or thicker line etc. - up for discussion)
  7. perhaps the use of patterns, or stronger patterning

There may be other aesthetic channels that'd increase, or decrease the saliency of visual features.

markov00 commented 9 months ago

I believe this should be implemented by the chart consumer, applying a different theme (high-contrast theme) instead of the current one when this user preference is configured in the browser