search

dequelabs / axe-core

Accessibility engine for automated Web UI testing
https://www.deque.com/axe/
Mozilla Public License 2.0
5.99k stars 779 forks source link

Color contrast false positive #608

Closed testingtycoon closed 6 years ago

testingtycoon commented 7 years ago

I have analyzed below page and observed axe throws color contrast issues that are not actually issues when tested them manually using color contrast analyzer. I didn't understand how axe picks foreground color. Here are the page details.

Page URL: https://www.udemy.com/corejava/learn/v4/content Credentials: mailed to Wilco colorcontrast_falsepositive

Elements to focus: Time duration values (ex: 17:10) under course content tab. Please find the attached screenshot.

Axe identified foreground and back ground colors: #959aa2 and #ffffff Manually identified foreground and back ground colors: #686f7a and #ffffff axe-core version: 2.4.1

marcysutton commented 7 years ago

Without logging in, I can tell you a bit about how to understand the results. The foreground element is the target under Element source, and the background is the Related node on the right side. If the related node in question isn't the one supplying a background color, then you've found a bug. But I can't know for sure until I can look at the DOM tree.

erikkroes commented 6 years ago

I've found a page on udemy with (I assume) the same markup.

screen shot 2017-11-13 at 15 36 40

It looks like the span has its opacity changed to 0.7 through css. I created a file in photoshop with a white background, and a layer of #686f7a set to 70% opacity to double-check. I get the exact same value aXe gives: #959aa2

marcysutton commented 6 years ago

Sounds like color contrast analyzer might not be factoring in opacity. I'm going to close this issue, as that text is definitely not meeting contrast requirements.