You would think that more than 25 years after ICC profiles were created to support color management that all our software would automatically make our images look consistently great. Sadly, that isn’t the case. For example, if you use Firefox under default settings on a wide gamut monitor, you can expect to see some pretty horrible results, as shown in the video below.

 

Color Management: The Big Picture

Before we dive into how to setup the web browser, we need to step back and look at the big picture. Color management isn’t just one thing you do, there are several areas where photographers need to pay attention. Just because you have calibrated and profiled your monitor, that doesn’t mean that every piece of software on your system will automatically use that information correctly. A properly color-managed workflow includes all the following:

• A decent monitor using a profile created with a hardware calibration tool. See my gear page for recommendations.
• Proper color settings in Photoshop. See this post for details.
• Soft proofing before printing, and hardware-base profiling of your printer if you make your own prints. See my gear page for recommendations.
• Enable color management in your browser, so that images look correct when surfing the web. Which is what we’ll cover below.

There are a few common problems you might see:

• Colors are weak / desaturated. This may happen when an image encoded in a wide gamut space (such as ProPhoto / Adobe RGB) is untagged, or when not properly mapped to display on a on a narrow-gamut monitor.
• Colors are punchy / over-saturated. This may happen when an image encoded in a narrow gamut space (such as sRGB) and is not properly mapped to display on a wide-gamut monitor.

 

How to test that your browser is properly color managed:

Here are a few quick tests to help check that your browser is setup properly for color management. If you pass these tests, you should be in good shape.

Test #1: Does your browser properly render tagged images?

This test is designed to help ensure that you browser both recognizes and properly uses embedded profiles. This series of test images all start from the same flattened sRGB test image. The image was then converted to various larger gamuts, but without taking advantage of the larger gamuts so as to make a direct comparison of what should be exactly the same rendered colors. I’ve included common spaces (sRGB, Adobe RGB, ProPhoto), P3 (used by Apple and others), Rec2020 (aka ITU-R BT.2020, which in my opinion should become a major standard for photography and included with Photoshop), and ACES CG Linear (an important standard for TV/film, but included here primarily to test with a significantly different gamma).

 
Expected result for test #1: As you hover over each of the various colorspace options right of the image, the display should look nearly the same (because all of these spaces can display all the colors I used in the initial sRGB version). If the colors shift, your browser is not processing the embedded profile as expected.

However, there is some loss of quality with very low gammas (and to a lesser degree with ultra-wide gamuts) as there just aren’t enough discrete values devoted to shadow detail. There is some very minor banding present in ProPhoto here, and the ACES CG Linear version is a total mess in the shadows if you’re looking closely. The low gamma is the main issue, and switching to a linear (1.0) gamma will show serious problems even for sRGB. This would be no problem at all (for any of these) in a 16-bit image format (such as JPEG2000). But sadly, there is no file format which offers small file sizes, 16-bits, and support across most web browsers (while PNG does support 16-bits, the file size is typically 2-10x larger). For this reason, I would recommend targeting profiles with gammas 1.8 to 2.6 (ideally 2.2 to 2.4) and gamuts no larger than Rec.2020 for gammas that aren’t in the target range. That leaves many great options including sRGB, P3, AdobeRGB, or Rec.2020 when sharing 8-bit JPG images for viewing only. Momentum appears to be behind webP as a growing format, but I don’t believe there is a 16-bit specification and Photoshop does not yet support it (though most browsers do). It’s unfortunate that JPEG2000 browser support is so limited.

Test #2: Does your browser properly assume sRGB for untagged images / CSS?

This test is designed to help ensure that un-tagged images properly assume sRGB color. There are many scenarios where image tags are accidentally missing or are deliberately stripped (often to reduce image size to increase page load speed). If you have a wide gamut monitor and your browser does not assume sRGB, you’ll see over-saturated images on many websites. Just a few examples of problem areas as of the time I’m writing this: Instagram, YouTube (such as thumbnails), Instagram (regardless of embedded profile in the upload), Facebook (anything in the feed before you click to open full size and untagged uploads), etc.

Additionally, almost all non-image content in your browser lacks colorspace information, and sRGB should be assumed (see the section below on “wide gamut CSS” for more details on this).

 
Expected result for test #2: You should see what looks like one single red, green, and blue value. If you see changes in red, green or blue in rows 2-4, your browser is not properly managing color. Row 1 is a reference for non-image colors. Matching here is less critical and more a matter of your opinion on how to manage a set of less than ideal tradeoffs (discussed below), but I believe it should ideally match as well.

Note: CSS (“cascading style sheet”) is how website specify color for anything which is not an image, such as text or the generic boxes in row 1 above (rows 2-4 are real images, but the first row is actually just a “div” filled with a color). Accuracy in CSS color isn’t as important as accuracy in photographs typically. You could argue that scaling the color to the limits of the display might be ideal, but it really isn’t something you can control (outside of a bad option in Firefox discussed below). Ultimately, I’d prefer to see CSS colors rendered consistently and web standards for wide gamut CSS adopted broadly, but we are a long ways from that point. For now, just be aware that the color of non-image portions of a website may be treated differently.

Test#3: Does your browser support both v2 and v4 ICC profiles

Please go to this ICC test page and compare the top image to the references below.

Expected result: The top test image show not show any green sky. If the top image shows green instead of blue sky, you’ve got problems. Support for v4 profiles isn’t necessarily a problem (since they aren’t all that widely used), but I would still advise making changes to pass this test.

Note: ICC profiles v2 and v4 are the only versions you will encounter for photography, and many of you may never use the less common but newer v4 standard (you may see reference to a newer “iccMAX” specification, which is unlikely to be used in photography for the foreseeable future and you should ignore it). If you are using Lumenzia, you can click “Gam” and review the list of profiles. Lumenzia will tell you which profiles are v4 profiles with a special note (v2 profiles are simply unmarked). Chances are that none of your profiles will be listed as v4. Ultimately, the differences between these standards won’t matter for most photographers, but you should test that your browser is able to handle both to ensure you are ready to view all images correctly.

If your browser passes tests 1-3, congratulations – you’re in good shape (this doesn’t guarantee color accuracy if you haven’t profiled your monitor, but it does tell you that the browser is managing color correctly). If you failed some of the tests, please skip to the sections at the bottom for tips on how to optimize your browser.

 

Potential benefits of embedding wide gamut color spaces

Many new monitors are designed to display wider gamuts (with comparisons to Adobe RGB and P3 being the most common). These allow you to see more real work and printable colors than the sRGB gamut allows. This is great for editing and may also allow you to view some more vibrant content on the web (and support for wide gamut will hopefully improve in the coming years).

Test #4: Monitor gamut

Here is a comparison of the maximum gamut of various common color spaces. Unlike the similar image above, these images have been processed to use the full gamut and you SHOULD see a change in the display (assuming you have a sufficiently wide gamut monitor). The goal here is not to make comparisons of these color spaces, that isn’t really possible with a simple 2-dimensional representation, just to give a relative sense of the expanded color palette available in broader color spaces like Rec. 2020.

Expected result for test #4: The image SHOULD show more color with the larger gamut spaces (because I created a new gradient for each color space to take advantage of the full gamut). If you do not see any change here, then you either have a narrow gamut display or your browser is set to render everything to sRGB (see the section on customizing Chrome below).

Note: In order to make things as directly comparable in the creation of these images, I have used the same gamma for each of the images in test #4. I used gamma 2.2 for all versions (the only significant shift here would be for ProPhoto, which normally has a 1.8 gamma, but it is of no major significance here for comparing the gamuts. Other parameters such as illuminants were left at defaults). Had I used native gammas, the ProPhoto version would be harder to compare as the brightest and darkest segments of this image would have been much smaller due to interaction with gradient layers (this is not a factor in the similar images above, which were a direct conversion of a single layer).

Test #5: Real-world gamut

Webkit (that organization that creates the open source software powering Safari and other browsers) has a large set test images that help easily compare sRGB vs wider gamuts to get a sense of how this impacts real images.

• Just move the slider back and forth to reveal the sRGB (left side) vs wide gamut (right side) versions of each image.
• In an ideal world, we'd be able to easily share images with wider color gamuts. But due to ongoing limitations and inconsistent support, it's still better to share images as sRGB these days.
• However, this is a good demonstration of why you should keep your original layered "TIFs" in a wide gamut colorspace. For vibrant images, they will look better on your monitor, they make better prints, and hopefully some day you'll be able to share them without having to convert to sRGB. So keep that great color!

Expected results for test #6: If you are viewing these images on a wide gamut display, you should see better color and detail when sliding to expose the wide gamut version. If you do not, you may be viewing with a narrow gamut monitor or your browser may be rendering all content as sRGB (see the section on configuring Chrome below).
Keep in mind that while the wide gamut images will look great on a wide gamut display, you may still wish to share your images after converting to sRGB to avoid color management issues that may exist on your viewer's computer/phone..

Test #6: Support for P3 in CSS (expect to fail this)

While you can ready view wide gamut images now with a properly configuring computer using a wide gamut monitor, support for wide gamut beyond images is far less developed at this point. As discussed above, non-image colors on websites are specified via "CSS". While not as critical as color management for photographs, the status quo is a messy set of tradeoffs between assuming all this color uses the narrow sRGB gamut or you can just throw management of this color out the window. The browser can assume sRGB to create consistency, but then anything that is not an image is limited to a more dull set of colors than many computers can display. Or the browser can toss color management out the window and map the RGB values to the limits of your display, sacrificing accuracy for vibrancy. And in the midst of this is a question as to what the designer of a particular website intended (do they understand color management, did they design for accuracy, do they want the most vibrant color possible?) The ultimate solution to this problem is to specify colors in a specific color space with a wide gamut.

Unfortunately, wide gamut standards and support are still at an early stage. There are proposals for support for P3, REC2020, LCH, and LAB color specifications, but at this point I think support is limited to P3 on the Safari browser. Aside from limited support, many monitors can display colors outside the P3 gamut already (#6 in P3 below is not as vibrant as #5 above in ProPhoto on my Eizo monitor, there's a huge difference in the maximum red and green values - I'd personally love to see broad support for REC2020). This isn't something you can really control at this point without creating other issues, it is what it is (you can set gfx.color_management.mode = 2 in Firefox for more vibrant CSS RGB colors, but this will cause horrible over-saturation with untagged RGB images and is therefore not a good option).

 
Expected results for test #6: If you are using a supporting browser (Safari) AND a wide gamut monitor, you should see #6 shows more vibrant red and green values. Most of you will just see a blank row for #6, as support for this new standard is very limited.

*** The P3 CSS row will show up blank for browsers which do not support this new standard (currently only supported by Safari to the best of my knowledge). If you don't see color, your browser does not support this new specification.

 

How to configure color management in Firefox:

If you use Firefox, you likely need to make some changes to pass the tests above.

Do the following if you can't pass the main tests above.

1. Copy / paste the following into the address bar (just like any website URL): about:config
2. Click to acknowledge the warning
3. Important: Search for gfx.color_management.mode and set it to 1 (this enables color management for all images, including ones that are missing tags)
4. Important: Search for gfx.color_management.enablev4 and set it to true by double-clicking it (this enables v4 profiles)
5. Optional: You may set the rendering intent via gfx.color_management.rendering_intent. Set it to either relative colorimetric (1, my recommendation) or perceptual (0, perfectly reasonable but may reduce saturation for the few images where the difference here matters). Saturation and absolute colorimetric should be avoided. I honestly don't understand the automatic option (-1), as I am unaware of whatever tag they are referencing and have no idea if it gets any real use, but I am not a fan of relatively undocumented features that may introduce variability across images. Picking between the best options here is probably not of much consequence as most content you view online won't be outside your monitor gamut and with matrix-based profiles (which is most of what you'll use with displays), perceptual and relative colorimetric would be treated the same.
6. Restart Firefox and run the tests above again.

Optional (not recommended for most users, I cannot think of a good reason to do this): If you need the browser to use a profile other than the default you've set in the operating system, you can specify something else by providing a file path via gfx.color_management.display_profile
 

How to configure color management in Chrome:

Chrome doesn't offer as much flexibility, but you shouldn't need it and Chrome generally runs well by default. It does have one interesting option, and that is the ability to force Chrome to output to a known gamut (rather than just rendering the colors as is under your current "default" monitor profile). This is a change to how it renders its output, not how it interprets the content on the site. Leaving this as default is generally best to take advantage of the best display possible on your monitor, but you could change to a smaller gamut like sRGB if you wish to get a rough "soft proof" of how something might look on a narrow-gamut monitor. To limit the output space for Chrome:

1. Copy / paste the following into the address bar (just like any website URL): chrome:///flags/#force-color-profile
2. The best option should be "default". However, if you have problems, you may wish to try "Display P3 D65" to force a relatively wide gamut or "sRGB" to force a smaller and more controlled gamut.
3. Relaunch Chrome

 

How to configure color management in Safari:

Safari should also be OK under default settings, and does not offer options to customize.
 

How to configure color management in Windows Edge:

Edge appears to be OK under default settings, and offers the same customization option as Chrome. Navigate to edge://flags/#force-color-profile if you'd like to force a particular output gamut.
 

How to configure color management for iPhone / iOS:

Each browsing app may have its own settings, but I am not aware of any configurable color management settings for the browsers nor any any browsers which support use of a hardware profiling device for accuracy (unlike for example the ColorTRUE app from X-Rite to display standalone images accurately).

The main control for accuracy is to set a reasonable screen brightness, as this heavily affects your ability to see shadow detail, etc. It may also involve disabling the iPhone's (Settings / Display and switch True Tone off), though TrueTone is meant to show color more consistent with ambient lighting conditions, as this will affect your perception of the screen.
 

How to configure color management for Android phones:

I don't have much experience with Android. Android 8.1 and higher include support for color management, but I understand there may be some watchouts for wide-gamut images rendering incorrectly, which still wouldn't surprise me for a mobile phone in 2021. And apparently roughly 20% of Android phones are still running operating systems older than v8.1.

If you're reading this on an Android device, please comment below on what you see in test #1 above (please note the model of phone you're using and version of Android you are using).

 

How to post your images in wide gamut with WordPress

As noted above, a missing color profile defeats color management. If you use WordPress, you may have this problem with the media library (which will reprocess and potentially alter your images during upload). Be sure to test that your image still has a profile by doing a test post, downloading the posted version of the image, and opening it in PS (which will likely warn you and should show a # in the file name tab if there is no embedded profile). It is possible to retain the profile if the image processing is done by the correct back end tool (Imagick aka "ImageMagick").

In WordPress, go to Tools / Site Health / Info tab, and open the "media handling section". Check that the active editor is WP_Image_Editor_Imagick (WP_Image_Editor_GD strips profiles last I checked). If you do not see Imagick, contact your web hosting provider for instructions to enabled it.

 

Summary:

• Profile your monitor and be sure to leave embedded ICC profiles in your images. Without this, all bets are off.
• Use the tests above to confirm your browser is properly using those profiles and best managing any un-tagged content on the web.
• Watch out for Firefox. If you are sharing images with clients, you may wish to recommend they view the with Chrome or Safari to improve the chances that they will see your artwork with the expected color.