AX_COLOR_01: Contrast issue on gradient backgrounds

[craigfrancis]

Running the audit on: https://portal.contact-associates.co.uk/

It fails for a colour contrast issue... white text on a gradient background.

Looking at the "Home" link as an example (main nav), the inspector shows:

Contrast ratio: 1.00 
AA level (4.54): #767676/#ffffff 
AAA level (7.00): #595959/#ffffff 

Not sure where its getting the "1.00", or what the 2 grey colours (#767676 or #595959) are for.

But it should be comparing white against something along the gradient range of #9E4594 (5.6) or #761786 (9.4) - personally I would compare against all colours and report on the worst contrast, but I realise that can get difficult the more colours you have on the gradient.

For reference I am now setting the background directly on the <a> to test, as before it was just on the parent <ul>... and just setting a static background colour (which is still there for the older browsers) does resolve this issue.

[alice]

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.

[craigfrancis]

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.

[Malvoz]

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: