elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
372 stars 120 forks source link

[Line Charts][COLOR CONTRAST]: Some of the lines fall below the required 3:1 contrast ratio for non-text elements #2425

Open 1Copenut opened 6 months ago

1Copenut commented 6 months ago

Description

We've received a report that some of the line charts in our sample data series do not meet the non-text contrast ratio of 3:1. I reviewed the sample data set E-commerce and was able to confirm the secondary green and pink lines and legend circles were below 3:1 contrast. Screenshots attached below.

Steps to recreate

  1. Log into a cloud instance of the latest Kibana (8.14.0 at this time)
  2. Enable the sample data series
  3. Pull up the E-commerce dashboard
  4. Review the Transactions per day line chart with a tool like Colour Contrast Analyser

Screenshots or trace logs


Screenshot 2024-05-06 at 7 22 08 PM
Screenshot 2024-05-06 at 7 21 54 PM

Proposed solution

I'd like to hear back from this team how best to tackle this problem. Please respond here or start a conversation in the accessibility channel.

WCAG guidance

gvnmagni commented 6 months ago

Question for the visualisation team since I want to be sure this, is that color customised or automatically generated as we do in hierarchy charts? (I am thinking about piecharts with multiple layers)

markov00 commented 5 months ago

hey @1Copenut @gvnmagni these 2 charts use custom colors selected by user. Is not a specific chart issue but the dashboard and the visualization in Kibana need to be reconfigured to respect that contrast. Please transfer the issue in Kibana repo