Web browser color management guide
Editor note:
This content is now obsolete, and that's a good thing. In the past few years, the main browsers adopted sane color management strategies and defaults. In 2019, Safari, Chrome and Firefox all pass our browser color management test. Firefox now has the worst color management support for not interpreting untagged images and page elements as sRGB by default, requiring a manual configuration to do so.
We'll update this guide soon with comprehensive tests of all browsers, including mobile devices. Stay tuned.
What is color management?
In an ideal world, every camera, screen, and printer would display color in the same way. Unfortunately, that’s not how it works in practice. Due not only to the inherent differences in all those mediums, but also production inconsistencies from unit to unit, color is different on each device. Color management is the ensemble of practices and technologies used to make all those different pieces talk the same language. A color profile is a dictionary, a description of how that particular device reproduces color; it allows us to preview and translate color, leading to color accurate reproduction among different devices and even mediums, like paper versus screen.
3D representation of the sRGB color space.
Color management is more than just printing
We tend to think color management and profiles equals printing and monitor calibration. But as web content consumption skyrockets, what are we doing to bring more accurate color to the internet?
This question was not apparent to me until recently. My web workflow followed the common denominator wisdom: convert your images to sRGB and they’ll look fine even on really bad screens. I wasn’t even tagging my files: sparing less than 3kb on each JPG seemed more important than embedding a profile.
What brought me to the light was buying a new wide gamut LCD monitor, more specifically a very nice Dell 3008WFP 30" display. This monitor has a wide color gamut covering almost the full AdobeRGB spectrum. This means it is able to display much more vibrant colors than a typical office LCD or even my previous Apple Cinema Display. When this new monitor arrived, suddenly all web pages looked like landscapes from Mars, with fluorescent colors, and every skin tone looked like it had just arrived from a vacation on the Caribbean without any sunscreen. It was that bad.
Color management to the rescue
I’ve been a color geek since starting to work as a designer. At that time, all I could do was adjust the gamma of my monitor using some simple visual tools, and download canned profiles for my printer, which really didn’t work at all. I dreamed of buying a real spectophotometer or colorimeter to calibrate my screen and create custom printer profiles, but this hardware was extremely expensive.
More than ten years passed and nowadays it’s cheap, accurate, and easy to calibrate your display and also generate custom printer profiles. I currently use a X-Rite i1 Display Pro for my LCD and a Colormunki Photo with ArgyllCMS to create printer profiles. This way I’m able to produce color accurate design proofs and also print my own photographs in fine art quality, using an Epson medium format printer. Display to print matching is excellent. Even canned profiles that come with most photo inkjets are really good nowadays. Spending less than US $200 on a monitor calibrator is a really smart investment.
But the importance of fully embracing this technology on the web never occurred to me.
Why tagging images for the web is not a complete answer?
Because web pages are made of much more than images, and all those elements should have predictable color, including CSS elements. Having color correct images is just a part of it.
Take, for example, the screenshot below. It’s a comparison of how Mozilla Firefox and Apple Safari web browsers render colors on page elements and untagged JPG files, for my wide gamut display. Both boxes should be the same color, but Safari, on the right, assumes the full monitor gamut for untagged JPGs and page elements, leading to distorted colors.
Web designs are made of much more than images; new technologies like CSS3, HTML5, and the rise of web typography make non-bitmap page elements more and more important. Also, GIF files don’t support embedded ICC profiles and they shouldn’t anyway: Why embed a 3kb profile on a simple background image that may be less than 1kb? As a result, W3C—the consortium that regulates web standards—determined that all untagged graphics should be assumed as sRGB.
Firefox vs. Safari color rendering on a wide gamut display. This image is a small capture of the genius Atlantis demo, by Frank Chimero, at the Lost World's Fairs website.
About sRGB
sRGB is a minimum common denominator color space. It was created by Microsoft and HP in 1996 and represents typical office or home viewing equipment and conditions. It has a small color gamut that can be accurately reproduced by almost all devices.
Never use sRGB as your main working color space, since it’s smaller than most digital camera color spaces, leading to unnecessarily clipped colors. Work on a bigger color space like Adobe RGB, or preferably ProPhotoRGB, and convert to sRGB only on output when preparing images for the web.
Color management support by browser
Who gets it right?
Browser test
Test your browser's color management support
Mozilla Firefox is the only browser than gives us some control on how to handle untagged images and CSS elements. Unfortunately, it comes configured by default to enable color management only for tagged images. In order to extend it to all page graphics, assuming sRGB for any untagged element, users should access an advanced configuration menu. Automatic integration with the operating system color management would be much better, although it’s understandable why they went this route.
Bobby Holley, one of the engineers involved with Firefox color management implementation, published an interesting article at the time Firefox 3.5 beta was launched, and cited how many users have corrupted monitor profiles on their systems. Enabling color management by default led to wacky colors in those cases. Also, there’s a small performance penalty. According to Bobby, it’s currently below 5%, but was 20–30% when they first started to implement it. His colleague, Jeff Muizelaar, also shares some of the process developing the new Firefox color management support and getting it up to speed.
Firefox 8 adds ICC v4 color profiles support and keeps all the controls introduces in Firefox 3.5, making it the first browser to offer a complete set of color management capabilities.
How to:
Other browsers limitations
Apple Safari
Safari supports both v2 and v4 ICC profiles. Unfortunately, it has no control over color on other page elements. Tagged images look right, but every other page element has over-saturated colors on a wide gamut LCD.
Google Chrome
Chrome is not a color managed browser, but there's some movement in this direction. Chrome 16, currently in beta, is the first version to offer ICC v2 and v4 color profiles support on the Mac OS X platform. The Windows version still doesn't have any color profiles support, but offers a command line switch to treat all images and page elements as sRGB, avoiding over-saturation problems for wide gamut display users. What we need now is a combination of both. :)
Microsoft Internet Explorer
Internet Explorer 9, released on March 15th 2011, is the first version to support color management. Like webKit-based browsers, untagged images and page elements are assumed to be on the full monitor gamut. All previous Internet Explorer versions aren’t color managed.
There's a key flaw in IE9 color management implementation: Unlike Firefox and Safari, the monitor profile is ignored during the color conversion. Internet Explorer 9 assumes your display is sRGB and ignores any color profile associated with it. This means that IE9 cannot be trusted for any critical color evaluation and wide gamut displays will still show overly saturated images. More information at this Luminous Landscape forum topic and also this thread at Adobe.com.
Opera
Opera doesn’t support color management at all. ICC profiles embedded in images are ignored and the whole page is rendered on the monitor colorspace.
Alternative fix: reduce your monitor color gamut
Besides asking browser developers to fully support color management on their software, there’s a workaround we can use on most wide gamut LCDs to make web colors look right: reduce their gamut temporarily. Most of those displays have a “color mode” or "color presets" menu on their controls that allows you to apply an sRGB simulation to the monitor.
The workaround would be to switch the display to sRGB and produce a color profile specific for that mode. When browsing the web, you’d select the sRGB profile and switch the display to sRGB by using its on-screen controls.
Depending on how you use your computer it could work for you, but clearly it doesn’t work for me since I browse the web while I work on Photoshop and other color managed programs, where a large gamut would be beneficial.
I’ll stick with Firefox for now, even though Chrome, Safari, and Opera are much faster on the Mac.
Best practices and recommendations
Assume sRGB for untagged files and unsupported formats like GIF, as the W3C recommends.
Work on a bigger color space, like AdobeRGB or ProPhotoRGB, but always convert to sRGB during export.
Always tag your JPG images. Use a larger colorspace, like AdobeRGB, only if your site’s audience uses high end monitors. Examples are a high end advertising photography website or a client area on your website where you can have control of your users’ display configurations.
PNG files are tagged by default on Photoshop, even though the program doesn’t allow us to select the “Embed color profile” option. If you don’t need any color profile tagging on your PNG files, try pngcrush to strip it from your files’ headers and make them a little smaller.
Ask browser developers to fully embrace color management and give users options on how the software should treat untagged images and page elements.