Wrong Colors in Chrome, Firefox (YouTube, other content)

johnscully

macrumors member
Original poster
Sep 11, 2010
59
15
Hi

the color management of the 4K iMac seems to screw up the colors which are displayed in browsers. Especially YouTube-Videos seem to suffer from that, as the exact same video shows different color-variations depending on what browser I use (see attached screenshot showing Safari, Chrome and Firefox). Which of the three browsers show the right colors, and what can I do to ensure the other browsers also show the right colors in the future (and not some washed out or over saturated version)?
 

Attachments

Krevnik

macrumors 68040
Sep 8, 2003
3,434
742
The problem here is not the iMac or macOS, per se. The issue is that browsers all tend to do color management differently. Especially if content is untagged on the web, which a lot of it is. So if they aren't telling CoreGraphics what's going on correctly, it will not look right. These big monolith rendering engines are especially prone to having color management issues because they take on so much of the color management themselves rather than distributing it to the platform like they probably should. But they have been getting better over time.

In this example, you may not actually be playing the same video on all three browsers. YouTube wants to use VP9 which Safari doesn't support, but Chrome and Firefox do. So Safari is playing H.264, while Chrome/Firefox are playing VP9. There could be some differences there, especially since there could be differences in the codec versions between Chrome/Firefox.

One last comment is that I would caution against using a single website for a test. Especially one run by a company that provides their own browser. Google in the past has been called out multiple times for breaking other browsers on their services. I'll leave other folks to decide if it is a conspiracy or not, but I simply don't trust Google services as a way to "test" color management of other browsers.

That said, some notes I do have:
  • Safari looks the most correct to me in this instance, considering there is studio lighting. Firefox looks completely wrong, oversaturated. Chrome looks like the gamma is too high, as if it's assuming a 2.6 gamma when it maybe shouldn't. But again, since this is video with two different codecs being used for playback, there's more variables at play. It could be how the VP9 was encoded (YouTube does this on the back end if you upload H.264 for example), it could be the VP9 codec itself doing something weird, etc.
  • I played with these browsers and a simple color management test: https://cameratico.com/tools/web-browser-color-management-test/. Safari and Chrome both demonstrated that they handle color management "correctly enough" to pass the test. Firefox 74 failed in that it doesn't support ICC v4 by default, and it treats untagged images/CSS as "device gamut" values, which is wrong.
The simple color management test explains the really red look to Marques in the Firefox window. The stark gamma difference between Chrome and Safari I think is due to the H.264 vs VP9 differences, to be honest. If I compare the two using a site like: https://webkit.org/blog-files/color-gamut/comparison.html, then the two look very similar. Nothing sticks out that explains why the video is so different.

EDIT: Yes, I don't have the iMac, but I do have a DCI-P3 display that I use day-to-day (which I used for this comparison), and I had a 5K iMac for 4-5 years. Color management is also something I obsess over a little bit as part of my photography hobby.
 
  • Like
Reactions: johnscully

johnscully

macrumors member
Original poster
Sep 11, 2010
59
15
Thanks for the detailed reply. So no luck in fixing the issue with some kind of preferences-changes within the browsers i guess...
 

Krevnik

macrumors 68040
Sep 8, 2003
3,434
742
Thanks for the detailed reply. So no luck in fixing the issue with some kind of preferences-changes within the browsers i guess...
Nope. And in this case, it’s mostly that Chrome and Safari seem to be behaving equally well for photo/CSS content that is both tagged and untagged. Firefox is not.

For the video, there’s more going on and so it’s not even clear what’s falling down, as it may just be a YouTube thing, rather than a browser thing (i.e. garbage in, garbage out).
 

halfcamerageek

macrumors member
May 31, 2011
41
5
Hello everybody. I'm the author of that test at Cameratico.

Yes, as of 2020, both Safari and Chrome handle wide gamut displays natively and without any extra configuration.

Firefox was the first fully color-managed browser, much before the others, but it requires an extra configuration flag to behave properly with untagged images and page elements. Otherwise, those are rendered on the full display gamut and look oversaturated.

You can read more here:
https://cameratico.com/guides/firefox-color-management/

or here:
https://developer.mozilla.org/en-US.../Releases/3.5/ICC_color_correction_in_Firefox

Cheers,
 

johnscully

macrumors member
Original poster
Sep 11, 2010
59
15
Thanks. Settings don't help with the look of YouTube videos unfortunately.
 

Krevnik

macrumors 68040
Sep 8, 2003
3,434
742
Thanks. Settings don't help with the look of YouTube videos unfortunately.
Video playback is a whole mess of beans on top of the usual stuff, to be honest. Codecs and container formats share some responsibility related to handling color management. And some apps like VLC will get the color management information from the video file properly, but then just fail to pass it onto the OS. Awesome.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.