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

Created on 21 Feb 2020  路  1Comment  路  Source: GoogleChrome/lighthouse

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
https://github.com/GoogleChrome/lighthouse/issues/4034

P2 bug good first issue

Most helpful comment

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

https://github.com/GoogleChrome/lighthouse/blob/fa70748c46fc1fb4236417ecb8848f965cd1613f/lighthouse-core/report/html/report-styles.css#L341-L346

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

>All comments

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

https://github.com/GoogleChrome/lighthouse/blob/fa70748c46fc1fb4236417ecb8848f965cd1613f/lighthouse-core/report/html/report-styles.css#L341-L346

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

Was this page helpful?
0 / 5 - 0 ratings