elastic-charts
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
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
- Log into a cloud instance of the latest Kibana (8.14.0 at this time)
- Enable the sample data series
- Pull up the E-commerce dashboard
- Review the
Transactions per day
line chart with a tool like Colour Contrast Analyser
Screenshots or trace logs
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
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)
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