Complete Guide To Browser Color Management – Color Management Issues Explained

Comprehensive Guides

Color management can be a mystery to some. When things just go slightly wrong with color, it can drive people crazy and into sheer frustration. But it does not have to be. We de-mystify how things work in browsers and what steps you can take to make sure your images display properly.

Difficulty: Easy

Read Time: 30 min

Real World Color Management Issues In Your Browser

Let me start by talking about what issues most people face which eventually lead them to look into color management. There are a few common mistakes and misconceptions to clear up. So what are the issues one might experience when putting images on the web?

Images Look Dull

One issue one might encounter is: images look too dull, desaturated, and have a slightly yellow color cast.

This can happen if an image was worked on in a larger color space and on export the color space has not been down-converted to sRGB. For once, it can occur that a browser or app does not read color profiles and therefore simply interprets colors as sRGB colors. Secondly, it could be an image without a color profile embedded. Then the color reference is lost and by default, most apps and browsers will also interpret those images as being in sRGB color space.

Images Look Oversaturated

The second scenario one might encounter is: images looking way oversaturated. With other people’s images, it is sometimes hard to tell, but you will notice when images you worked on look so much more vibrant compared to how they looked when you were working on them in Lightroom or Photoshop.

Here, when using a wide gamut display, your browser does not map colors to the wider gamut of your monitor. Potentially, the browser cannot access your display gamut / custom color profile to map the colors or does not support color management at all.

About Color Gamuts And Color Spaces

Color spaces are outlined frameworks in which we reference colors usually by coordinates in a 3-dimensional space.

The whole of all colors to be described in a color space is called the color gamut. Different color spaces can hugely differ in the number of addressable colors and therefore in the size of gamut.

sRGB is a so-called minimum common denominator color space.

It was created by Microsoft and HP cooperately in 1996 to be used on monitors, printers, and the internet with the intent of representing typical workplace or home viewing displays and conditions.
It has a comparitavely smallcolor gamut which will be accurately reproduced by most devices.

“Images intended for professional printing via a fully color-managed workflow, e.g. prepress output, sometimes use another color space such as Adobe RGB (1998), which accommodates a wider gamut. Such images used on the Internet may be converted to sRGB using color management tools that are usually included with software that works in these other color spaces.” (Source: Wikipedia)

That said, Images with no color tag / embedded color profile usually default to be displayed as sRGB as it is easier than guessing the unknown color profile.

Best practice is to convert every image to sRGB and to embed the sRGB profile on export before images hit the web!

3 Most Common Issues With Browser Color Management

1. Wrongly Embedded Color Profile

If you have worked in a larger color space than sRGB and have not converted your image to sRGB on export, this can lead to all sorts of issues.

Considering, there is no embedded profile, no application will ever know how to interpret the color information and by default will look at the available color data as if it was an sRGB image.

You can imagine, issues are pre-programmed, and almost always this will result in a lousy viewing experience.

2. No color Management Or Discarded Profile

Should you have worked in a larger color space than sRGB and have embedded the color profile but not converted to sRGB, the result depends on the capabilities of the application you are viewing the image with.

If the application or browser does not support color management, the embedded profile won’t be read, and all colors will be interpreted as if they were in sRGB.

In some cases, upon upload, the server/system will strip away the images metadata and color profile information. Should this happen, the result will be the same as if you have not embedded a color profile, to begin with.

Boutique Retouching desaturated-prophoto Complete Guide To Browser Color Management - Color Management Issues Explained
This image demonstrates the color shift happening to an image when working in ProPhoto color space and an application either cannot access the color profile or if there is no color profile embedded to the image

Avoid Color Shift For Embedded Or Stipped Away Color Profiles

To avoid issues demonstrated in scenario one and two, make sure to always down-convert your image’s color space to sRGB and preferably embed the sRGB color profile information into your image’s metadata.

3. Images Look Way Oversaturated – Even In sRGB And Correctly Embedded Profile

In some cases, you might experience your images in an app or browser to look super saturated, much more compared to how the same photo looks within Photoshop.

The Color Space of the exported image was set to sRGB, and the profile has been embedded correctly. So what happened there?

This scenario can occur if you are working with a wide gamut display (much larger color space than sRGB) and viewing an image with an application that either does not support color management or its color management features are not activated properly.

Boutique Retouching oversaturated-prophoto Complete Guide To Browser Color Management - Color Management Issues Explained
Oversaturation issue when viewing an image on a wide gamut display without proper color management. sRGB colors will not be mapped down according to the color space difference.

The Web Is Still sRGB

The reality is images nowadays mainly go onto the web. While in print, you are sort of in control of the outcome, with the internet, you are not in control of what devices your images are being looked at with. You cannot know it the displays people use are calibrated, if they are color-managed applications or not, or how wide the display device’s gamut will be.

In the earlier days of the internet, things were a bit easier. Wide gamut displays were rarely used outside of a professional print and design environment, so the number of colors was pretty much restricted by the technology of graphics cards and the operating system. The outcome then was more predictable.

With today’s variety of devices and different color gamuts, things have gotten a bit trickier. Color management is necessary to implement for a predictable outcome. Unfortunately, some browsers have worse progress in adopting those features than others. It still can be hit and miss.

As sRGB is the smallest common standard color space, it still is the basis of all colors and images displayed in browsers, if not tagged otherwise.

Browser Color Management Test

It is always recommended to check if your browser currently supports color management or not. If you have the latest updates dated in 2019, you most likely have been using a color managed browser. However, some of us do not always update their browsers and might be on an earlier revision of the software, possibly without color management features.

As I said, luckily, now almost all browsers have adopted a color management engine. That said, Firefox has a color management engine but most likely needs some tweaking or even manual activation. We will get into the details of that in a bit.

ProPhotoRGB tagged image vs. sRGB tagged image

Boutique Retouching ProPhotoRGB_tagged_bars Complete Guide To Browser Color Management - Color Management Issues Explained

Boutique Retouching sRGB_tagged_bars Complete Guide To Browser Color Management - Color Management Issues Explained

The difference shows how much wider your display’s gamut is, compared to sRGB.

sRGB untagged vs. sRGB image

Boutique Retouching sRGB_untagged_bars Complete Guide To Browser Color Management - Color Management Issues Explained

Boutique Retouching sRGB_tagged_bars Complete Guide To Browser Color Management - Color Management Issues Explained  If these display as the same color, untagged images are getting color managed. If there is a difference, you might want to activate color management for untagged images.

Untagged CSS element vs. sRGB image

Boutique Retouching sRGB_tagged_bars Complete Guide To Browser Color Management - Color Management Issues Explained

Shows if non-image elements are getting color managed.

Current State Of Color Management Support (2019)

This table contains information about the state of color management engines in 2019. If you are on an older browser version, you might want to consider updating. Color management features have been adopted by most browsers over the year of 2018 and chances are, if you had issues with your favorite browser before by now they might have been sorted out, either partially or entirely.

Mobile devices are still the Achilles heel of color management. Most mobile operating systems and its browsers struggle with displaying colors correctly. The lack of color managed apps and lack of calibration capabilities still can make every photographer cringe. Hopefully, this will change shortly, too!

Browsers Color Management Note
Safari MacOS
Internet Explorer V11
CM in V11
(ICC V2 and V4)
Edge (Windows 10) (ICC V2 and V4)
Firefox (64)
✔✔✔
needs to be activated, settings below *
Chrome (71)
✔✔✔
Chrome on Android
Safari on iOS
Android

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 provides 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. 🙂

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.

Mozilla Firefox

Firefox has been one of the first browsers to adopt color management features. In earlier versions, you might need an add-in to enable color management and to use the settings that now are integrated into the base-engine of firefox. Most times, color management has to be controlled and activated in the advanced config settings. *see all settings and how to access them below

Microsoft Edge

While Microsofts Internet Explorer supports color management out of the box. The edge browser is still stuck in development regarding the color management features. Unfortunately, Microsoft has announced to eventually drop the browser, so there is not much further feature development to be expected.

How To Enable Color Management For Firefox

  1. Open a new tab in Firefox
  2. Type “about:config” into the URL field
  3. Access the Firefox config after the notice of warning.
  4. Filter for “color_management” in the search field.
  5. Change “gfx.color_management.enablev4” to the value “true”
  6. Change “gfx.color_management.mode” to the value “1” to enable color management for all tagged and untagged colors.
  7. Add the URL of your custom monitor profile as value for “gfx.color_management.display_profile”
  8. Restart Firefox for the changes to take effect.

Boutique Retouching firefox-color-management Complete Guide To Browser Color Management - Color Management Issues Explained

Read More On The Topic Of Color Theory And Color Management:

Color Of The Year 2018

Color Of The Year 2019

Guide To Accurate Monitor Color Management

5 Tips On Better Color Understanding

Daniel

Daniel

After years of working in a stressful IT environment and combating mental illness, Daniel finally found fulfillment in the creative field. By using the process of retouching as therapy and drawing from his technical background Daniel grew to become an award-winning, internationally published retoucher, and Adobe Photoshop Certified Expert in less than two years. His retouching agency, BOUTiQUE RETOUCHING, offers both professional retouching services for high-end clients as well as professional education in an effort to help others reach the same results that Daniel takes pride in. Daniel will happily answer any of your questions!
Daniel

Daniel

After years of working in a stressful IT environment and combating mental illness, Daniel finally found fulfillment in the creative field. By using the process of retouching as therapy and drawing from his technical background Daniel grew to become an award-winning, internationally published retoucher, and Adobe Photoshop Certified Expert in less than two years. His retouching agency, BOUTiQUE RETOUCHING, offers both professional retouching services for high-end clients as well as professional education in an effort to help others reach the same results that Daniel takes pride in. Daniel will happily answer any of your questions!

Recent Articles

2 Responses

  1. Thank you for this article, it is very helpful. Glad to see most browser are ok now. One hint: The table under “Current State Of Color Management Support (2019)” is very hard to read.

    1. Thank you for leaving some feedback. The table design was from before we made major changes to the website’s design. Thx for bringing that up. We fixed it =)

Leave a Reply

Your email address will not be published. Required fields are marked *