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

Colorblind Mode for Kibana Visualizations #10726

Open
Tracked by #300
boutcher opened this issue Mar 8, 2017 · 14 comments
Open
Tracked by #300

Colorblind Mode for Kibana Visualizations #10726

boutcher opened this issue Mar 8, 2017 · 14 comments
Labels
enhancement New value added to drive a business result Feature:ElasticCharts Issues related to the elastic-charts library Feature:Lens Project:Accessibility Team:Visualizations Visualization editors, elastic-charts and infrastructure WCAG A

Comments

@boutcher
Copy link

boutcher commented Mar 8, 2017

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 thomasneirynck added Feature:Timelion Timelion app and visualization Feature:Visualizations Generic visualization features (in case no more specific feature label is available) release_note:enhancement labels Mar 8, 2017
@thomasneirynck
Copy link
Contributor

thomasneirynck commented Mar 8, 2017

agreed. fwiw, this is also a long-term goal: #9708.

@tbragin tbragin added the bug Fixes for quality problems that affect the customer experience label Jul 28, 2017
@Dumbaz
Copy link

Dumbaz commented Aug 21, 2018

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:
image

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 rayafratkina added enhancement New value added to drive a business result Feature:ElasticCharts Issues related to the elastic-charts library and removed release_note:enhancement bug Fixes for quality problems that affect the customer experience labels Aug 23, 2018
@rayafratkina
Copy link
Contributor

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
Copy link
Contributor

snide commented Aug 23, 2018

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

@timroes timroes added Team:Visualizations Visualization editors, elastic-charts and infrastructure and removed Feature:Visualizations Generic visualization features (in case no more specific feature label is available) labels Sep 16, 2018
@irisdemented
Copy link

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.

@timroes timroes added Team:DataVis Team label for DataVis Team and removed Feature:Timelion Timelion app and visualization Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Mar 5, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/datavis (Team:DataVis)

@nickofthyme
Copy link
Contributor

Opened an issue here elastic/elastic-charts#1061

@myasonik
Copy link
Contributor

myasonik commented Jul 1, 2021

With elastic/elastic-charts#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
Copy link
Contributor

myasonik commented Jul 9, 2021

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?

@timroes timroes added Feature:Visualizations Generic visualization features (in case no more specific feature label is available) Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Jul 12, 2021
@elasticmachine
Copy link
Contributor

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

@timroes
Copy link
Contributor

timroes commented Jul 12, 2021

@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
Copy link
Contributor

@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
Copy link
Contributor

timroes commented Jul 12, 2021

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
Copy link
Contributor

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.

@stratoula stratoula removed the Team:DataVis Team label for DataVis Team label Nov 4, 2022
@stratoula stratoula added Feature:Lens and removed Feature:Visualizations Generic visualization features (in case no more specific feature label is available) labels Jan 26, 2024
@jb1b84 jb1b84 removed the vis:a11y label Aug 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result Feature:ElasticCharts Issues related to the elastic-charts library Feature:Lens Project:Accessibility Team:Visualizations Visualization editors, elastic-charts and infrastructure WCAG A
Projects
None yet
Development

No branches or pull requests