Web browser color management

Initial publication: August 2012. Updated for latest browser versions November 2013.

Anyone who is interested in sharing photography on the web sooner or later encounters the problem of browser color management. Not too long ago, color management on the web was simply non-existent. Things have improved, but along with progress come partially implemented features and exceptions.

On this page, I hope to shed some light on the current state of color management for the three major browsers on the Windows platform: Internet Explorer, Firefox and Chrome. Whenever those features depend on user preferences, I will clarify their scope and effect.

Color management requirements

Conceptually, color management in a web browser context consists of two stages: interpretation and output mapping. The interpretation stage is concerned with taking  the color information on a web page (typically in the form of RGB triplets) and interpreting them in terms of a color space. This associates an intended visual response with the RGB numbers. Then, in the second stage, these colors are converted back to (different) RGB triplets are sent to the monitor.

In browsers that lack color management, the RGB input values are sent straight to the monitor, without any attempt to match intended and observed colors. Predictably, this can lead to large color discrepancies due to differences in equipment and viewing conditions between creators and observers of images. In the following, I will outline the desired behavior of web browsers in each of the two stages.

Stage 1: interpretation

Typically, a page consists of a number of elements, which may require different treatment. Four important categories are listed below.

  • Images with embedded profiles. Some images, especially those originating from photo-enthusiasts contain color profiles that specify the color space for the RGB values in the image. It’s the browser’s task to identify these images and map the RGB values to the creator's intended colors. There are two current versions of the ICC profile specification, version 2 (ICCv2) and version 4 (ICCv4). Ideally, a browser should support both ICCv2 and ICCv4 fully, but in practice the matrix-type ICCv2 profiles have broader support than the LUT-type ICCv2 profiles and ICCv4 profiles. Luckily, most standard color spaces such as sRGB, Adobe RGB and ProPhoto RGB are of the ICCv2 matrix type.
  • Images without profiles. Technically, the color intent of an image without embedded profile is undefined. However, for web use it is common - and arguably the only consistent solution - to interpret the RGB values as being in the sRGB color space.
  • HTML/CSS elements. These are all the non-image (and non-Flash) elements on a page. These are required by the W3C to be in the sRGB color space.
  • Flash applications. Adobe’s Flash plug-in runs inside the browser, but writes its own content to the screen, it bypasses the browser's color management entirely. The current version of Adobe Flash supports basic color management, but only when it’s explicitly enabled by the producer of the content. Because web pages often contain color-coordinated images, CSS styles and Flash content, this has resulted in a situation where browser vendors and Flash content creators wait on each other to enable color management. This may well be the reason for Chrome's behavior to disable color management whenever a Flash object is detected on a page (see below).

Stage 2: output mapping

Application of monitor profile. A monitor profile describes the relation between the RGB values sent to the monitor and the colors that are perceived by the viewer. The browser should use the monitor profile to convert the intended colors to RGB values that will produce the desired sensory response in the observer.

In dual monitor environments, the browser should also detect on which monitor it is being displayed, and use the appropriate monitor profile. This is common for color-aware applications such as Photoshop, but none of the current browsers do this (see table below). Make sure you run the browser on your primary monitor.

 

The browsers - summary

Internet Explorer

Internet Explorer should not be used for color critical work. Although it understands both ICCv2 and ICCv4 profiles, it does not use the monitor profile, which means you cannot rely on what you're seeing. IE11 may be passable only if you have reason to believe that the native response of your monitor is close to sRGB. Otherwise, avoid.

Firefox

Firefox is currently the best choice for color managed browsing. It provides good out-of-the-box support for ICCv2 images and the monitor profile. Support for ICCv2 LUT and ICCv4 profiles and the default assignment of sRGB profiles can be enabled through user preferences (see instructions below). 

Chrome

Chrome's color management solution may be sufficient in particular scenarios. However, the future evolution and support of color management features in Chrome is uncertain.

Chrome provides out-of-the-box support for basic ICCv2 profiles and the monitor profile. 

When additionally using the '--enable-monitor-profile --disable-gpu' command line switches (on Windows), all page content - including untagged images, HTML/CSS elements and Flash content - is treated as sRGB unless otherwise specified. Because most color-managed content is sRGB (explicitly or implicitly) this works well enough for most pages. Unfortunately, using this switch restricts the gamut of all images is restricted that of sRGB. This effectively forces users with wide-gamut monitors to choose between wide-gamut rendering and color management of untagged objects.

Detailed feature comparison

Comparison of color management features on recent web browsers (Windows 7)
  Stage 1: interpretation Stage 2: output mapping
Browser

Supports ICCv2 matrix profiles

Supports ICCv2 LUT and ICCv4 profiles

Treats untagged images as sRGB Treats HTML/CSS colors as sRGB Uses monitor profile Uses profile for secondary monitor Monitor black point compensation
Internet Explorer 11 yes yes n/a n/a no n/a n/a
Firefox 25 yes option(1) option(2) yes no no
Chrome 31 yes(4) no Windows-only option(3) yes no no
  1. Requires setting [gfx.color_management.enablev4 = true] in about:config. Track progress at https://bugzilla.mozilla.org/show_bug.cgi?id=679875
  2. Requires setting [gfx.color_management.mode = 1] in about:config.
  3. Requires the '--enable-monitor-profile' command line option. For this to work on recent versions, it should be combined with the '--disable-gpu' option. Track progress at https://code.google.com/p/chromium/issues/detail?id=141480
  4. Limitation: when the '--enable-monitor-profile' command line option is used all content is first transformed to sRGB before being sent to the monitor. As a result, the source image is clipped to the sRGB gamut.

Firefox color management settings

The color management settings are accessed by typing 'about:config' (without quotes) in the address bar and acknowledging the warning message. You can navigate to a relevant key by scrolling or by typing part of its name.

  • gfx.color_management.mode The default value is 2, which converts only tagged images to the monitor profile. By setting this to 1, images without a profile and HTML/CSS colors (undocumented) will be treated as sRGB content.
  • gfx.color_management.enablev4 Setting this to 'true' enables support for ICCv2 LUT and ICCv4 profiles.

Chrome color management settings

Chrome offers only one color management option in the form of a command line switch. When enabled, all content is assumed to be in the sRGB space and converted to the monitor's color space using the monitor profile.

To enable this setting, the '--enable-monitor-profile --disable-gpu' command line option must be invoked whenever Chrome is launched. As a browser can be launched in multiple ways, you may need to make the necessary changes in multiple places. For example, Chrome may be launched from the taskbar, the start menu, the mail client (web links) and by opening clicking supported file types. Each of these requires specifying the command line option in the relevant place.

Here, I will describe only the process for supplying the command line option via the taskbar and start menu. Locate the Chrome icon, right-click on it and select 'properties'. If you're doing this on the taskbar, you will have to right-click again on the Chrome icon in the pop-out menu before you can click 'properties'. On the 'Target' line, after [...[...]chrome.exe, insert a space and enter '--enable-monitor-profile --disable-gpu' (without brackets). Click OK, close and relaunch Chrome.

Methods

All tests were performed on Windows 8.1, with an ICCv4.2 monitor profile generated by the Eizo ColorNavigator 5.4 software. To determine the capabilities of each browser, I have used the tests on the following pages:

In my case, my main monitor has a response that is quite similar to sRGB, which can make it hard to say with certainty whether the monitor profile is being applied. To account for this, I used an alternate calibration for my monitor with gamma=1 (linear profile). When this calibration is loaded, failure to use the profile results in images that are too bright.