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. 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 common in most people’s homes. 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 just shortened to “sRGB” in normal discussions.

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 i1 Display 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 is also similarly endowed.

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 a number of 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 "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.

                                         

Not all monitors will be able to pass this test. In particular, unless ambient lighting is very low it may be difficult to differentiate between the two darkest levels. However, with rapid advances in technology, a growing number of monitors are able to pass this test with ease.

I have 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 from other greyscale bars resulting in some looking slightly red, slightly green, etc. You'll have to investigate if this can be rectified on your monitor.

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.

B. Wide-gamut monitors and colour-managed web browsers

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 can display more colours than normal sRGB monitors. Unfortunately, this has caused much woe 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 on 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 as default (which is bad) and uses "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 absurd is that? Also this "mode 2" is where 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 colour manage, change the value of gfx.color_management.mode to a value of "1". There, that was easy. Also, 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 is the bizarre behaviour where Google Chrome used to disable colour management if it encountered media elements such as Adobe Flash. Very bizarre, but at least that 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 did.

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

Web Browser Version Operating System monitor profile (on a wide-gamut monitor), targeted to 80 cd/m2 luminance, 6500K white point, and 2.2 gamma.
ICC v2 matrix ICC v4 matrix ICC v2 LUT ICC v4 LUT
Tagged image test Untagged image test ICC4 test Tagged image test Untagged image test ICC4 test Tagged image test Untagged image test ICC4 test Tagged image test Untagged image test ICC4 test
Mozilla Firefox (Note 1) 50.1.0 Pass Pass Pass Pass Pass Fail Fail Fail Fail Fail Fail Fail
Google Chrome (Note 2) 55.0.2883.87 m (64-bit) Pass Fail Fail Pass Fail Fail Fail Fail Fail Fail Fail Fail
MS Edge (Note 3) 38.14393.0.0 Fail Fail Fail Fail Fail Fail Fail Fail Fail Fail Fail Fail
Internet Explorer (Note 3) 11.576.14393.0 Fail Fail Fail Fail Fail Fail Fail Fail Fail Fail Fail Fail

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 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 most likley due to an incorrect configuration on their system, an incorrect interpretation on their part, or a combination of the two. 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.

  1. OS = Windows 10 Pro 64-bit.
  2. Monitor = sRGB monitor calibrated to 80 cd/m2 luminance.
  3. All monitor 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.

Web Browser Version Operating System monitor profile (on an sRGB monitor), targeted 80 cd/m2 luminance, 6500K white point, and 2.2 gamma.
ICC v2 matrix ICC v4 matrix ICC v2 LUT ICC v4 LUT
Tagged image test Untagged image test ICC4 test Tagged image test Untagged image test ICC4 test Tagged image test Untagged image test ICC4 test Tagged image test Untagged image test ICC4 test
Mozilla Firefox (Note 1) 50.1.0 Pass Pass Pass Pass Pass Fail Pass Pass Pass Pass Pass Pass
Google Chrome (Note 2) 55.0.2883.87 m (64-bit) Pass Pass Fail Pass Pass Fail Pass Pass Fail Pass Pass Fail
MS Edge (Note 3) 38.14393.0.0 Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass
Internet Explorer (Note 3) 11.576.14393.0 Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass Pass

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 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 fail in some manner. The following steps must to be done, though, to make this successful:

  • Step 1 - Buy a colorimeter or a spectrophotometer.
  • Step 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.
  • Step 3 - Install Firefox
  • Step 4 - Go into Firefox's about:config and ensure that gfx.color_management.mode is set to "1".
  • Step 5 - Within Firefox's about:config, ensure that gfx.color_management.enablev4 be set to "true".
  • This page last updated on Jan 2017 by Kulvinder Singh Matharu

    kulvinder Singh Matharu
    kulvinder Singh Matharu
    kulvinder Singh Matharu