Colour settings

This page has some information on monitor calibration, profiling, colour management, wide gamut-displays, and web browser colour management which some people may find useful. A summary on how to set up colour management for web browsers is found at https://www.silentnomad.com/chart/#summary

A. Colour-managed web browsers, and wide-gamut monitors

This is really about colour management support within modern web browsers and the particular issues experienced when using these browsers with wide-gamut monitors.

I use wide-gamut monitors; these are monitors which display more colours than normal sRGB monitors. Unfortunately, this has caused much grief with regards to seeing the correct colours on the web as few browsers properly manage colour. If you use a standard sRGB display then you’re lucky as you are unlikely to experience large colour shifts (if any) when viewing images through a web browser. Unless I take particular care in managing my colour workflow, I will see colours much more saturated than intended resulting in a very poor and harsh user experience.

A background on browser colour management can be found in the following links:

  1. Web browser color management
    http://simon.tindemans.eu/cm/webcm
  2. The sad state of web browser color management
    http://gearoracle.com/guides/web-browser-color-management-guide/
  3. Color Management on the Internet
    http://correctcolor.org/cccommentary/?p=88

I’ve done a bunch of browser tests and gleaned a lot of information from the above resources. Based on that, the best web browser on Windows 7 and Windows 10 for colour-managed workflows is Firefox (when correctly configured) followed closely by Google Chrome. Both Internet Explorer and Microsoft Edge have significant flaws. I’ve shown the results of these tests below. It’s important to state that unless you’ve properly calibrated and profiled your monitor, it’s a just a waste of time trying to configure any colour-managed workflows. So just go out there and get a good colorimeter, or spectrophotometer, to calibrate and profile your monitor. Really!

A default install of Firefox has colour management enabled (which is bad) and uses what it calls “mode 2” (which is also bad!). Having colour management enabled as default within the browser is wrong as it assumes that everyone is running in a correctly configured colour-managed OS with a calibrated and profiled monitor. How dumb is that? Also, in “mode 2”, all tagged images are colour-managed (good), and all untagged images are not colour-managed (bad!). This is the wrong behaviour; untagged images should be managed as if they are sRGB. Luckily there is an easy way to fix that.

By going into Firefox’s about:config settings, it’s possible to change the item gfx.color_management.mode from a value of “2” to either “0” or “1”. A setting of “0” will turn off colour management (a lot of people will need to do this), and a setting of “1” will provide the correct behaviour to treat untagged images as sRGB. So, if you want Firefox to manage colour correctly, change the value of gfx.color_management.mode to a value of “1”. There, that was easy. Also, in contrast to some previous versions, it’s now safe to enable Firefox to colour manage images which are tagged with an ICC version 4 profile in addition to the normal version 2 profile. Again this is easy to do; within Firefox’s about:config, change gfx.color_management.enablev4 to “true”.

Regarding Google Chrome, colour management is enabled by default (bad) and its behaviour is similar to Firefox’s “mode 2” (also bad). There does not appear to be any way to change Google Chrome’s behaviour and it seems that there this isn’t a fix coming any time soon. However, one element that has been fixed in the later releases of Google Chrome was with the bizarre behaviour where Google Chrome disabled colour management if it encountered media elements such as Adobe Flash. Very bizarre, but at least it is now fixed.

As for Microsoft’s IE11 and Edge, forget them for any colour managed workflows unless you have an sRGB monitor.

This is the general configuration of the tests that I undertook.

  1. OS = Windows 10 Pro 64-bit.
  2. Monitor = Dell U3014 wide-gamut monitor calibrated to 80 cd/m2 luminance, 6500K white point, and 2.2 gamma.
  3. All monitor were profiles created with x-rite i1Profiler software and x-rite i1Display Pro colorimeter.
  4. In order to pass the test, the web browser must show the image with the correct colours.

And these are the results of the tests.

Notes:

  1. It’s important that Firefox settings be changed from its default settings. Within about:config, the property gfx.color_management.mode should be set to “1”, and gfx.color_management.enablev4 should be set to “true”.
  2. With this version of Chrome, the previous colour management command line switches have no effect, and colour management is now enabled.
  3. The browser may appear to pass this test with an sRGB monitor as colour conversion may be taking place but to the sRGB colour space regardless of the monitor’s colour profile.

I’m aware that some people may state that their browser on their system contradicts the results in the above table. Although it’s possible that I’ve made mistakes, I’m fairly confident that I’ve done the tests correctly, so any discrepancy is likely due to an incorrect configuration on their system, an incorrect interpretation on their part, or a combination of the two. For example, look at the table below and compare to the table above. These are the results of the same tests but done on a system with a monitor that is close to sRGB; this will tend to mask colour management flaws. Another thing to note is that the x-rite i1Profiler software creates ICC4 matrix profiles as default so please be sure to configure it to create ICC2 matrix profiles.

  1. OS = Windows 10 Pro 64-bit.
  2. Monitor = sRGB monitor calibrated to 80 cd/m2 luminance.
  3. All monitor profiles were created with x-rite i1Profiler software and x-rite i1Display Pro colorimeter.
  4. In order to pass the test, the web browser must show the image with the correct colours.

And these are the results of the tests.

Notes:

  1. It’s important that Firefox settings be changed from its default settings. Within about:config, the property gfx.color_management.mode should be set to “1”, and gfx.color_management.enablev4 should be set to “true”.
  2. With this version of Chrome, the previous colour management command line switches have no effect, and colour management is now enabled.
  3. The browser may appear to pass this test with an sRGB monitor as colour conversion may be taking place but to the sRGB colour space regardless of the monitor’s actual colour profile.
Based on the above results, for Windows 7 and Windows 10 environments that have had proper monitor calibration and monitor profiles created, I recommend the use of Firefox for consistent and accurate colour reproduction; all other browsers have unacceptable failures. The following steps, though, must be done to make this successful:

  1. Obtain a colorimeter or a spectrophotometer.
  2. Using the colorimeter or a spectrophotometer, calibrate and profile your monitor. Make sure that the monitor profile created is a matrix-based ICC version 2 profile. Do not use a LUT-based monitor profile, regardless of ICC version, and do not use an ICC version 4 monitor profile. Another benefit of doing this is that it helps to avoid inconsistent colour management in other applications that do not have full support for ICC4 profiles.
  3. Install Firefox.
  4. Go into Firefox’s about:config and ensure that gfx.color_management.mode is set to “1”.
  5. Within Firefox’s about:config, ensure that gfx.color_management.enablev4 is set to “true”.

B. Monitor Calibration

This section provides a quick and dirty way to adjust the “brightness” or luminance of a computer monitor, and was originally put together as some people had reported that my images were too dark; these reports were especially common when CRT monitors were widespread. Today, with LCD-type monitors, these reports are not so common and, to a large extent, that this is because modern LCD monitors have extremely high luminance levels of over 200 candelas per square metre or cd/m2 set as default. I have to squint to look at monitors with these high luminance levels.

But monitor calibration is more than just about luminance levels; the colours on the monitor matter too. The common colour-standard for screens is sRGB IEC61966-2.1 which is normally shortened to “sRGB”.

The most accurate way to get correct colours and luminance levels is to use a device such as a colorimeter or spectrophotometer to measure the light from your monitor which, in conjunction with appropriate software, allows you to calibrate and profile your monitor. Over the years I’ve used colorimeters and spectrophotometers from x-rite and DataColor but I’ve now settled on the x-rite i1Display Pro colorimeter which has been designed to provide more accurate readings for wide-gamut monitors compared to older colorimeters. I believe that the DataColor Spyder 4 has similar functionality.

However, I imagine that you’ve landed on this page because you do not have a hardware device such as a colorimeter or spectrophotometer and are seeking some help in alternative means of adjusting your monitor. The steps below describe a quick and dirty process for setting the luminance of your monitor. I also highly recommend that you visit Norman Koren’s site and The Lagom LCD monitor test pages as these offer superior methods; if you are going to use those sites then please make sure that your web browser zoom settings are at exactly 100%.

I’ve set my monitor luminance to 80 cd/m2 which some people may consider too dark; others may recommend 90 cd/m2 or even 120 cd/m2. Regarding standards, ISO 3664:2009 allows a monitor luminance from 75 cd/m2 to 100 cd/m2 with a monitor colour temperature of 6500K. And ISO 12646:2008 allows a monitor luminance from 80 cd/m2 to 120 cd/m2 with a monitor colour temperature of 5000K. You see, it all depends, and I’ve found that 80 cd/m2 suits me fine. Your mileage may vary.

OK then, let’s begin! Hopefully, your monitor has controls labelled “Contrast” and “Brightness”.

Step 1

Ensure that the monitor has been switched on for at least 30 minutes. Also, ensure that room-lighting is not too bright.

Step 2

Most monitors today should have a setting that allows you to choose from several colour presets; choose “sRGB”. If you do not have such a setting, trying resetting the monitor to its default setting; this may or may not help! Once ready, we can proceed to Step 3.

Step 3

FOR CRT MONITORS:

Set the monitor “Contrast” level control to the maximum value. If image distortion occurs or if the screen seems too bright then lower the “Contrast” level until the distortion is reduced. Note that CRT monitors can exhibit severe geometric distortion at high “contrast” levels.

FOR LCD MONITORS:

LCD monitors do not suffer from the same contrast-related geometric distortions that CRTs do, so it is very easy to set the “contrast” level too high on LCD monitors. Instead, as a starting point, try going for a “contrast” level that is 30% or 40% of the maximum that your monitor can achieve especially if you have a brand spanking new monitor. Older LCD monitors may need to have the contrast as high as 100% due either to ageing or to older design limitations. This is the hardest and most subjective setting to achieve without a hardware-based calibration device.

Step 4

This step is all about adjusting the black-level. Starting from a “Brightness” level of 0% (i.e. zero) on your monitor controls, increase the monitor “Brightness” level so that you can see all 21 distinct shades in the test bar shown below. The goal is to keep the blackest bar as black as possible (so that blacks appear black on photos) but still be able to differentiate between adjacent bars.

Most modern monitors will be able to pass this test. But I’ve found that a number of LCD monitors exhibit subtle, but noticeable, colour artefacts such that each greyscale bar appears to have a different tint or hue, resulting in some looking slightly red, slightly green, etc. You’ll have to investigate if this can be rectified on your monitor.

The other thing I’ve noticed is that each greyscale bar sometimes appears to dynamically change brightness levels, and then settles down if the screen contents are not changed (such as not scrolling). This seems to happen on some portable devices such as laptops running in battery mode where display power-usage is being reduced.

Remember, the steps listed above are quick and dirty, and are only about monitor “brightness”. Reproduction of correct and consistent colours will require the use of a hardware-based device such as a colorimeter or spectrophotometer.

The last major content update of this page was in Jan 2017.