AX_COLOR_01: Contrast issue on gradient backgrounds about accessibility-developer-tools HOT 3 OPEN

Strangely, in the computed style, the backgroundColor is specified as rgba(0, 0, 0, 0), which is where that white value is coming from. We should be checking the backgroundImage and preferring that to backgroundColor - the reason I haven't done this previously is that it's quite complicated to correctly parse gradient rules (cf. https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp&l=6812). However, something like http://www.glazman.org/JSCSSP/ could help here.

As you say, an ideal solution should compare against all colors specified in the gradient.

from accessibility-developer-tools.

I forgot to mention, when I did the original test, I had:

background: #761786;
background: linear-gradient(to bottom, #9E4594 0%, #761786 100%);

Where I had forgotten to add the background colour on the second rule... by correcting that to:

background: #761786;
background: linear-gradient(to bottom, #9E4594 0%, #761786 100%) #761786;

The accessibility checker could get and test against the background-colour... so while I hope that somehow we can test along the length of the gradient (or dare I say it, the background image), at least the issue of it not returning the correct colour is not a problem with the extension.

from accessibility-developer-tools.

I don't know what's causing my issue, which seems related, but may it be that the contrast analyzer isn't taking the CSS property/value pair: brightness: filter(<number-percentage>) into consideration?

While setting a <video> (in which the background doesn't change much behind the stacked element) to brightness(55%), with a IMO very noticable color contrast to an element stacked on top, the analyzer is warning me about low color-contrast, however the color-range which it suggests results in the element being barely visible:

from accessibility-developer-tools.