Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
monfera opened this issue Sep 14, 2021 · 1 comment
Open

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

monfera opened this issue Sep 14, 2021 · 1 comment
Labels
discuss To be discussed enhancement New feature or request

Comments

@monfera
Copy link
Contributor

monfera commented Sep 14, 2021

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.

@monfera monfera added enhancement New feature or request discuss To be discussed labels Sep 14, 2021
@markov00
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discuss To be discussed enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants