elastic-charts icon indicating copy to clipboard operation
elastic-charts copied to clipboard

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

Open 1Copenut opened this issue 9 months ago • 2 comments

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

1Copenut avatar May 07 '24 00:05 1Copenut

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)

gvnmagni avatar May 07 '24 10:05 gvnmagni

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

markov00 avatar May 29 '24 08:05 markov00