Colorblind Mode for Kibana Visualizations

[boutcher]

Describe the feature: We have employees who are color blind, and can't consume data in most visualizations we build. This request is to solve the issue for these folks, which I assume could be accomplished through allowing for texture fills to be applied to different data series.

Even if this was exposed as an option in Timelion, that would go a LONG way to help us out. I'm sure there are cleaner ways to solve this as well. Just trying to ensure the problem is documented.

Relevant WCAG Criteria: 1.3.3 Sensory Characteristics - Level A

[thomasneirynck]

agreed. fwiw, this is also a long-term goal: https://github.com/elastic/kibana/issues/9708.

[Dumbaz]

We also noticed this problem, but it goes further than only the visualizations.

Of course whats most important are the visualizations, but there are other things as well:

a) Without being able to discern colors one cannot see the highlighted menuentry, see circled area to the left in the picture b) As @boutcher said, the visualizations themself

Possible solutions: For a) Mark the active Menupoint For b) Put patterns into the lines bordering the areas or put patterns into the areas

Link to related WCAG20 SC 1.4.1

CC: @timroes @rayafratkina, Issue was already open

[rayafratkina]

The menu will change with K7, so let's keep this issue focused on the Visualizations. @snide should I create an issue for menu item highlighting or this already handled?

[snide]

The menu will be changed with EUI / K7.

The visualization color blind issues are built into the new graphing library in EUI.

The palette is here (qualitative viz)

https://elastic.github.io/eui/#/guidelines/colors

The header is here

https://elastic.github.io/eui/#/layout/header

A complicated example of the graphs using those colors is here

https://elastic.github.io/eui/#/series-charts-beta/general

[irisdemented]

Not sure if this is where I go for a feature request - but I’d just like to add myself to the list requesting the ability to make visualizations accessible for colorblind users.

I have an employee who is red-blind colorblind. They love the tag cloud and would like to keep using it, but there doesn’t seem to be an intuitive way for me to change the colors or color palette Kibana uses to create the cloud to enable work.

I see that it’s a long term goal, glad it’s in the works but hope for a solution or workaround soon.

[elasticmachine]

Pinging @elastic/datavis (Team:DataVis)

[nickofthyme]

Opened an issue here https://github.com/elastic/elastic-charts/issues/1061

[myasonik]

With https://github.com/elastic/elastic-charts/pull/1138 recently merging in Charts, we need to expose an advanced setting or something to turn this on in Kibana. But the first step is done!

[myasonik]

Tagging in @timroes and @stratoula to lead implementation on this.

It should eventually be roped into the user setting stuff but that can be migrated down the line.

Probably makes sense for the setting to be registered in the charts plugin?

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[timroes]

@stratoula do you think we could add this still to the 7.15 roadmap (at least as a stretchgoal) to add the setting and use it in all chart renderers that support that feature? Ideally we'd get it in early in the development cycle, so that we give solution some time in 7.15 too to use it if they want.

I'd recommend we group it in advanced settings under "Accessibility" and call it something like accessibility:texturedCharts (@markov00 @myasonik any opinion on the name of this setting?)

[stratoula]

@timroes I think that we can :) but I have some questions about the implementation. I see that Texture https://elastic.github.io/elastic-charts/?path=/story/stylings--with-texture has multiple settings.

How is this advanced setting going to work? When it is true, all the XY bars will be applied to a default texture? Which is it? Are we going to give more capabilities to the users?

[timroes]

Good call I haven't actually looked at the implementation in elastic-charts beforehand. So this is nothing where we can just set a setting in elastic-charts and it figures out best disitrbution of textures etc. I think in this case, looking at the story we'll need to have significantly more work on our side to do, so I am also not sure if we should still squeeze that into 7.15.

I don't think we should let the user configure textures etc manually. Maybe @markov00 can give some guidance on how those shapes should be determined and distributed for best data visualization aspects?

[stratoula]

Yes, I think that we need to define the scope of this task and how it is going to work and then decide if we can squeeze it in 7.15. For now, I moved it to 7.16.