Three years ago I had published an article on this subject. I was just curious to see how much has been changed during all these years. In essence: not much. Most of the web browser screw up color for you.
But let’s examine it in detail. As you can read in my aforementioned article, Section 3 of the sRGB standard dictates the following color handling practices for web browsers:
- All elements (images, text, background) should be in the sRGB color space. Text and background are assumed to be in sRGB (the proposed style sheet extension is not implemented even in color managed browsers).
- If an image has no associated ICC profile, it is assumed to be in sRGB.
- If an image has an associated ICC profile, it is converted to sRGB.
- The entire page (which is in sRGB after the image conversion) should be converted to the monitor profile, if there’s one associated with the monitor. If the user’s machine has no monitor profile, the sRGB page is displayed preserving color numbers (which is equivalent to associating the monitor color profile with it).
I usually do two test to examine a browser’s color handling. First, is what I call the quick LuLa test. The Luminous Landscape is a site I visit a lot. The site has a pleasing green sidebar, which looks awfully over-saturated on a wide-gamut monitor (such as the EIZO CG241W I’m using) when the browser does something wrong in its color handling code. So actually I could assess a browser’s color management code visually just by visiting the LuLa.
The above image illustrates what happens if a browser handles images correctly, but forgets about all other elements – such as background color. I put Safari and Firefox side by side, made a screenshot on my EIZO, and converted the image back to sRGB. Believe me, the sRGB conversion reduces the over-saturation a LOT. The above is just to illustrate the concept.
The second is evaluating tagged image handling with this web page.
I tested four mainstream browsers on OS X 10.8 Mountain Lion using a calibrated and profiled EIZO CG241W monitor (calibration and profiling was done using basICColor display 5). I have not tested these browsers on Windows, because I’m not using them. This is also the case with Internet Explorer. No Mac version – no test.
The results are disappointing. None of these browsers are able to display color correctly out of the box. Firefox by default emulates Safari’s incorrect behavior, but there’s hope: you can switch it over to handle color correctly (using the gfx.color_management.mode configuration variable). And with this switch, Firefox is still the only of the four that does things as they are described in the sRGB standard!
Let’s see where they screw up:
Chrome – By not implementing color management at all.
Firefox – By not making the correct behavior the default. Guys, don’t care about how Apple can’t do it right, you can!
Opera – This is an interesting beast. It does points 1 and 2 correctly (assumes everything in sRGB), but completely ignores profiles in tagged images. This is one more reason why you shouldn’t add non-sRGB images to your website.
Safari – I can’t believe Apple still can’t make it right. Safari handles points 2 and 3 correctly, but completely ignores non-image elements. This way one has no chance to make his/her web site look good on wide gamut Mac monitors. I know, Apple makes only mediocre sRGB displays, but they target imaging professionals where color is at utmost importance.
So the bottom line is the same as it was three years ago: if you happen to have a wide gamut monitor, you should use Firefox (at least on the Mac and from the four mainstream browsers).
A message to my fellow colleagues: It irritates the hell out of me that you still can’t make it right after so many years. Peek into the Firefox codebase or just read the f(antastic) sRGB standard! If you still can’t understand what’s wrong with your product, I’m more than happy to sell you consulting hours… 😉 I still think that color management is fairly straightforward if done right, and it’s only hard for users to understand because you make mistakes like this.