Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"Background and foreground colors do not have a sufficient contrat ratio." Really?

See original GitHub issue

Bug report

Provide the steps to reproduce

Run LH on any webpage (for example on youtube.com).

What is the current behavior?

I have this on my webpage: screenshot_186 Lighthouse: screenshot_187

CSS:

div#warningbackground { background-color: #ff0000; }
span#warningtext {
    color: #ffffff;
    font-size: 20px;
}
span#warningtext a {
        background-color: #ffffff;
	padding: 2px 5px 4px 5px;
	color: #0000ff;
}

What is the expected behavior?

I think contrast ratio is more than OK.

Environment Information

Affected Channels: *Chrome: 67.0.3396.99 a337fbf3c2ab8ebc6b64b0bfdce73a20e2e2252b-refs/branch-heads/3396@{#790}
Operating System: Windows 10

V8 6.7.288.46 Related issues

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:8 (2 by maintainers)

Top GitHub Comments

3reactions

justinribeirocommented, Oct 20, 2020

@englishextra axe-core v4.x appears to resolve this issue (I can’t duplicate the above issue in via @axe-core/cli on 4.0.2, as seen running the specific color-contrast rule on the cli below).

Currently, we’re pegged to 3.5.5, but this is on the v7 roadmap for update in #11207

1reaction

patrickhulcecommented, Oct 20, 2020

@englishextra that almost certainly is because of the offscreen slides that page has that mess up background color detection. Separate bug welcome though I don’t know if we’ll be able to do much about it (axe seems to just skip them in latest version).