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:
pure black instead of dark grey tick labels (the current mid gray would belong to less contrast tbh.)
maybe 1px larger font
a more legible or disambiguated font eg. Atkinson Hyperlegible (I think we should use disambiguated fonts already as a baseline)
maybe, shadow or outline around the text on filled labels, to make it stand apart more
possibly darkened (on light background) and perhaps marginally thicker axis lines and other annotations
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)
perhaps the use of patterns, or stronger patterning
There may be other aesthetic channels that'd increase, or decrease the saliency of visual features.
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
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:
There may be other aesthetic channels that'd increase, or decrease the saliency of visual features.