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

Accessibility - Contrast too weak for links in (vulnerable front end library) tables in dark mode #10363

Closed
SphinxKnight opened this issue Feb 21, 2020 · 1 comment · Fixed by #10364

Comments

@SphinxKnight
Copy link
Contributor

Provide the steps to reproduce

  1. Run LH on http://www.orleans-metropole.fr/
  2. In the "Best practices" tab/part, in the "Includes front-end JavaScript libraries with known security vulnerabilites"
  3. Unfold this category
    (4. Enable dark mode (if not already enabled))

What is the current behavior?

The link provided in the "Library Version" column is unreadable as contrast ratio is 1.5:1
image

What is the expected behavior?

The color for this link should adapt to dark mode and maybe use the same color as the other URLs

Environment Information

  • Affected Channels: DevTools
  • Lighthouse version:
  • Chrome version: tested on Canary (82.0.4065.1) & Release (80.0.3987.116)
  • Node.js version:
  • Operating System: Windows 10

Related issues
#4034

@patrickhulce
Copy link
Collaborator

patrickhulce commented Feb 21, 2020

Thanks very much for filing @SphinxKnight! This would be a great first issue if anyone is interested :)

Basically add .lh-table-column--link a to our defined link styles

.lh-audit-group a,
.lh-category-header__description a,
.lh-audit__description a,
.lh-footer a {
color: var(--color-informative);
}

EDIT: @SphinxKnight already filed a PR for this! WOW! :)

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

Successfully merging a pull request may close this issue.

3 participants