Skip to content

Color-contrast does not take into account mix-blend-mode #3187

@straker

Description

@straker

The mix-blend-mode CSS property specifies how colors are blended together. By default the mix-blend-mode is set to normal, which is mostly how our flattenColor algorithm works. But by changing the mix-blend-mode the background color can be completely different.

For example, taking this HTML, the output is faint green color.

<div style="background-color: rgba(255, 255, 255, 1.0);">
  <div style="background-color: rgba(0, 128, 0, 0.25);">Hello World</div>
</div>

image

But if we change the blend mode we get a completely different color, in this case a faint pink color.

<div style="background-color: rgba(255, 255, 255, 1.0);">
  <div style="background-color: rgba(0, 128, 0, 0.25);mix-blend-mode: exclusion;">Hello World</div>
</div>

image

See https://www.w3.org/TR/compositing-1/#blending

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions