Skip to content

Color contrast miscalculates foreground color with opacity #3924

@straker

Description

@straker

Given the following HTML:

<style>
button {
  color: #fff;
  background: #00633D;
  border-color: #00633D;
  opacity: .65;
}
</style>
<button><span>Hello</span></button>

The foreground color is calculated as #c5dcd3, which is not quite correct. If we put the calculated color next to the rendered HTML, the calculated foreground color is not the same.

I'll need to dig into the color spec again to see how opacity works on text nodes as it appears it should use the background behind the element with opacity instead of blending into all backgrounds.

Metadata

Metadata

Assignees

No one assigned

    Labels

    color contrastColor contrast issuesfixBug fixesprA pr has been created for the issuerulesIssue or false result from an axe-core rulesupport

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions