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

[EuiHeader][COLOR CONTRAST]: Header breadcrumbs with blue background have color contrast ratio below 4.5:1 #7514

Closed
1Copenut opened this issue Feb 6, 2024 · 1 comment · Fixed by #7643
Assignees
Labels
accessibility - WCAG AA Level AA WCAG Accessibility Criteria accessibility

Comments

@1Copenut
Copy link
Contributor

1Copenut commented Feb 6, 2024

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

  1. Navigate to EuiHeader view in EUI docs site
  2. Run axe browser scan from Chrome or Firefox dev tools
  3. Verify there are 6 color contrast errors, all stemming from the breadcrumbs on the page

WCAG or Vendor Guidance (optional)

Screenshots or Trace Logs

Screenshot 2024-02-06 at 8 34 00 AM
Screenshot 2024-02-06 at 8 39 15 AM
@1Copenut
Copy link
Contributor Author

1Copenut commented Apr 5, 2024

Thank you for clearing this issue @mgadewoll! It'll be a big improvement on the automated a11y front.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility - WCAG AA Level AA WCAG Accessibility Criteria accessibility
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants