[EuiHeader][COLOR CONTRAST]: Header breadcrumbs with blue background have color contrast ratio below 4.5:1
1Copenut opened this issue · comments
Trevor Pierce commented
Describe the problem
While auditing some Kibana items, I discovered a recurring color contrast issue in the heading breadcrumbs. I traced it to the EuiHeader component, specifically the blue breadcrumb links on the light blue background.
The breadcrumbs have a 4.17:1 ratio in the light mode and 4.35:1 ratio in dark mode. I think the issue could be remediated by adjusting the breadcrumbs to use the same color / background color as the secondary action EuiButton
. Screenshots attached below.
To Reproduce
- Navigate to EuiHeader view in EUI docs site
- Run axe browser scan from Chrome or Firefox dev tools
- Verify there are 6 color contrast errors, all stemming from the breadcrumbs on the page
WCAG or Vendor Guidance (optional)
Screenshots or Trace Logs
Trevor Pierce commented
Thank you for clearing this issue @mgadewoll! It'll be a big improvement on the automated a11y front.