Product: axe-core
Expectation: I expect axe-core to use the right background color value (as can be observed by a color-picker) for color contrast calculation.
Actual: axe-core doesn't seem to calculate the right background color. Seems like it's only wrong when there are multiple layers of non-opaque background colors involved.
Motivation: This should be fixed so the correct color contrast value can be computed.
Sample test cases:
<html>
<body>
<div style="background-color: red;">
<!-- 'blue' with 0.3 alpha -->
<div style="background-color: rgba(0, 0, 255, 0.3);">
<!-- 'green' with 0.3 alpha -->
<div style="background-color: rgba(0, 128, 0, 0.3);">
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>Expected background color (as picked up by a color-picker): #7C2736
Background-color computed by axe-core (bgColor inside the data field): #7D145B
<html>
<body>
<div style="background-color: rgba(255, 255, 255, 1.0);">
<!-- 'green' with 0.25 alpha -->
<div style="background-color: rgba(0, 128, 0, 0.25);">
<!-- 'red' with 0.5 alpha -->
<div style="background-color: rgba(255, 0, 0, 0.5);">
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>Expected background color (as picked up by a color-picker): #DF6F5F
Background-color computed by axe-core (bgColor inside the data field): #AF8860
I think (but not sure) this is because the flattenColors function doesn't apply the simple alpha compositing formula.
I am using a Chrome extension for my color-picker, if that matters: https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
Product: axe-core
Expectation: I expect axe-core to use the right background color value (as can be observed by a color-picker) for color contrast calculation.
Actual: axe-core doesn't seem to calculate the right background color. Seems like it's only wrong when there are multiple layers of non-opaque background colors involved.
Motivation: This should be fixed so the correct color contrast value can be computed.
Sample test cases:
Expected background color (as picked up by a color-picker): #7C2736
Background-color computed by axe-core (
bgColorinside thedatafield): #7D145BExpected background color (as picked up by a color-picker): #DF6F5F
Background-color computed by axe-core (
bgColorinside thedatafield): #AF8860I think (but not sure) this is because the flattenColors function doesn't apply the simple alpha compositing formula.
I am using a Chrome extension for my color-picker, if that matters: https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg