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

[SideNavigation][a11y] contrast does not meet 3 to 1 ratio #2210

Open
jenndiaz opened this issue Oct 12, 2023 · 1 comment
Open

[SideNavigation][a11y] contrast does not meet 3 to 1 ratio #2210

jenndiaz opened this issue Oct 12, 2023 · 1 comment
Assignees
Labels
a11y Questions or topics for the accessibility team ask design Questions or topics for the design team bug Results from a bug in the CSS implementation sync to jira These will be pushed into adobe internal jira

Comments

@jenndiaz
Copy link
Contributor

Description

The selected SideNav item color does not meet 3 to 1 contrast ratio with the adjacent background colors.

Steps to reproduce

  1. Go to the docs site for side nav
  2. Observe the selected standard variant, the background color of the selected variant compared to the background color of the adjacent SideNav items background colors

Expected behavior

The contrast between the non-selected and selected SideNav items MUST be at least 3:1.

Screenshots

Screenshot 2023-10-12 at 10 32 36 AM

Additional context

This is a failure of WCAG Success Criteria: 1.4.11 Non-text Contrast (Level AA) – WCAG 2.1
WCAG Understanding document: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast

@jenndiaz jenndiaz added the bug Results from a bug in the CSS implementation label Oct 12, 2023
@castastrophe castastrophe added the ask design Questions or topics for the design team label Oct 19, 2023
@adobe adobe deleted a comment from yuvrajj04 Dec 4, 2023
@castastrophe
Copy link
Collaborator

Current failure on latest code: insufficient color contrast of 2.01 (foreground color: #b1b1b1, background color: #f8f8f8, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1 for .spectrum-SideNav > .is-disabled.spectrum-SideNav-item > .spectrum-SideNav-itemLink[href="#"] > .spectrum-SideNav-link-text

https://opensource.adobe.com/spectrum-css/?path=/story/components-side-nav--default&globals=testingPreview:!true

@castastrophe castastrophe added a11y Questions or topics for the accessibility team sync to jira These will be pushed into adobe internal jira labels Dec 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Questions or topics for the accessibility team ask design Questions or topics for the design team bug Results from a bug in the CSS implementation sync to jira These will be pushed into adobe internal jira
Projects
None yet
Development

No branches or pull requests

3 participants