Introduction
High contrast mode is a new setting we plan to introduce in order to give the majority of user a more appealing experience while at the same time provide readability and accessibility to all kind of user that would need or prefer a more contrasted set of tones.
On dark theme, this setting would be applied only to a subset of elements (grids, labels) and not to charts colors, since the default color palette is already contrasted enough on dark theme to be considered accessible.
Important note:The following list of specs would be applied only to light theme, apart from where it is specified for dark theme as well.
Colors
For high contrast mode we pick colors that are by design more contrasted with background
Behind Text alternative
A little discussion with Visualisation Team is required here, we need to check our to proceed here in order to be sure that all text on top of charts can be contrasted enough to pass accessibility requirements (4.5), but this is affected by previous point as well.
Neutral colors
High contrast setting does not affect this set of neutral colors.
Vis as text
All colors have a contrast with background higher than 4.5
Gradiens
Gradients that are currently used in charts such as heatmap should be replaced with new dedicated colors.
Partition charts
Would be great if charts that allow for additional hierarchical metrics should rely of colors from spectrum instead of calculations that often create weird results. This needs to be discussed for high cardinality partition charts.
Default mechanism would require colors to lower by one shade for every additional metric (11 > 10 > 09):
Also here, a discussed with Visualization Team is needed since we would easily create non accessible colors for lighter shades.
Grid colors
Grid labels colors
Additional dedicated semantic colors
There are specific contexts in which colors are used with a semantic meaning, it would be great to uniform this across the product, this set of colors reflects the current need on Discover and it is just a first attempt for an update, needs to be discussed.
### Related
- [ ] https://github.com/elastic/elastic-charts/issues/2512
- [ ] https://github.com/elastic/elastic-charts/issues/2514
Introduction High contrast mode is a new setting we plan to introduce in order to give the majority of user a more appealing experience while at the same time provide readability and accessibility to all kind of user that would need or prefer a more contrasted set of tones.
On dark theme, this setting would be applied only to a subset of elements (grids, labels) and not to charts colors, since the default color palette is already contrasted enough on dark theme to be considered accessible.
Important note: The following list of specs would be applied only to light theme, apart from where it is specified for dark theme as well.
Colors For high contrast mode we pick colors that are by design more contrasted with background
Behind Text alternative A little discussion with Visualisation Team is required here, we need to check our to proceed here in order to be sure that all text on top of charts can be contrasted enough to pass accessibility requirements (4.5), but this is affected by previous point as well.
Neutral colors
High contrast setting does not affect this set of neutral colors.
Vis as text All colors have a contrast with background higher than 4.5
Gradiens
Gradients that are currently used in charts such as heatmap should be replaced with new dedicated colors.
Partition charts
Would be great if charts that allow for additional hierarchical metrics should rely of colors from spectrum instead of calculations that often create weird results. This needs to be discussed for high cardinality partition charts.
Default mechanism would require colors to lower by one shade for every additional metric (11 > 10 > 09): Also here, a discussed with Visualization Team is needed since we would easily create non accessible colors for lighter shades.
Grid colors
Grid labels colors
Additional dedicated semantic colors
There are specific contexts in which colors are used with a semantic meaning, it would be great to uniform this across the product, this set of colors reflects the current need on Discover and it is just a first attempt for an update, needs to be discussed.