Steps to reproduce: 1. Open https://jsfiddle.net/tz0qhowy/2/ The left element has a red background and an image which has 0.5 opacity. The right element is a canvas which has red background and the image drawn with 50% opacity. I think both the left and the right side should always perfectly match with each other. In Safari during you switch color profiles [OSX System settings -> Displays -> Color], you can clearly see that the color do not match on the canvas with the one rendered by HTML.
<rdar://problem/83056004>
I am able to reproduce this bug in Safari 15.5 on macOS 12.4. It matches Chrome Canary 104. Although as per mentioned bug, Firefox Nightly 103 has desired behavior where left and right both have same colours. Although the colours in Firefox Nightly are not affected by "gfx.color_management.mode" config, since I tried both 1 and 2 values as per "MDN Page". It can be spec bug since Firefox do have colour management issues (at least as far my knowledge goes) so Safari and Chrome might have correct behaviour. Thanks!