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

Insufficient color contrast when active nav link is hovered #351

Closed
SatyamSetia opened this issue Jul 15, 2023 · 3 comments · Fixed by #353
Closed

Insufficient color contrast when active nav link is hovered #351

SatyamSetia opened this issue Jul 15, 2023 · 3 comments · Fixed by #353
Assignees

Comments

@SatyamSetia
Copy link
Member

Describe the bug
As per 1.4.3 success criteria in WCAG, the color contrast should be at-least 4.5:1 for the visible normal text. But in case of active nav link, when it is hovered, the color contrast is currently 1.56

To Reproduce
Steps to reproduce the behavior:

  1. Hover over active nav link.
  2. Try to inspect the color contrast in hovered state using developer tools

Expected behavior
Color contrast ratio should be at-least 1.56

Screenshots
Screenshot 2023-07-15 at 11 38 52 PM

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]
@SatyamSetia
Copy link
Member Author

Hey, @EmmaDawsonDev
Just wanted to share my interest on working this bug fix if in-case you find it to be a relevant issue to be fixed.

My proposal for the fix -
In case there is specific design guideline for this case which makes it fulfil the contrast success criterion then lets go with that. Otherwise, lets make the text color to be black.

@EmmaDawsonDev
Copy link
Member

Let's go ahead and make it black for now so that it passes. I'm going to work on the design a bit more in the meantime as I'm not 100% sure about it yet.

@SatyamSetia
Copy link
Member Author

Acknowledged 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants