Open
Description
When running color contrast, if opacity is applied to an ancestor element the final color can change. However, as a user it looks more like a bug when the colors do not match the element that gives the error.
For example, given the following HTML:
<div style="opacity: 0.85">
<span style="color: #0065b9">Hello World</span>
</div>
Gives the following message:
"Fix any of the following:
Element has insufficient color contrast of 4.41 (foreground color: #267cc3,
background color: #ffffff, font size: 12.0pt (16px), font weight: normal).
Expected contrast ratio of 4.5:1"
Since the foreground color does not match the color of the node, it is easy to perceive this as an error in the color contrast rule. However the color is the final color after opacity is applied, so it is in fact the correct true color of the element.
We should add opacity information to the remediation message to inform the user that the reason the colors are different is due to opacity of a parent.