Testing Web Browsers for Colour Accuracy

If you want to make sure your browser is displaying colour correctly, you can do so by opening test images into it and seeing how they look. The colour properties of the images help to identify problems with web browsers.

Test One

Try creating two identical ProPhoto RGB images in Photoshop, but leave the profile out of one of them. You can achieve this merely by unchecking the profile box under “save as”.

Now open these two images into your web browser either by clicking on “open with” or by dragging them straight in. Do they look identical? One of them should look significantly muted. If they look the same, your browser is not colour managed. The same experiment will work with Adobe RGB images, albeit not so well if you have a wide-gamut monitor (use sRGB for that).

Test Two

Create two files of the same image: one in ProPhoto RGB and one in sRGB. Save them both with the profile embedded (check the box in the “save as” dialogue window). Again, open the two photos in your chosen web browser. On many standalone monitors, you’re quite likely to see a slight shift in colours when flicking between the two files. Choose pictures that have a wide variety of rich colours, such as stained glass windows.

If you see no change whatsoever, there’s a strong chance that your browser is ignoring the monitor profile and converting all tagged files (those with a colour profile embedded) into sRGB. Internet Explorer does this by default. Chrome seems to do it (October 2018). The resulting colour on a wide-gamut monitor is hideous. At best, this treatment yields inaccurate colour.

Please note: this test may not work on laptop screens because their gamut is likely to be completely contained by sRGB.

Quirks in Web Browsers

Firefox is still a browser you can rely on for colour, although if you have two monitors it only works with one at a time – it can’t flick between colour profiles. You can also tweak it to assign sRGB colour to any photos without a profile embedded, which is an intelligent guess most browsers don’t make.

Opera, like Firefox, seems to behave okay as long as you stick to one monitor. Drag an image across to a second screen and the colour gets pickled.

Safari is one of the best web browsers for colour management, since it reads embedded profiles in images and makes use of the monitor profile. Unlike Firefox, you can’t make it “guess sRGB” when a profile is missing.

An untagged ProPhoto RGB image that will look muted in all web browsers
This “untagged” ProPhoto RGB image should look muted in any browser.
A ProPhoto RGB image with an embedded ICC profile
This is the same ProPhoto image with an embedded ICC profile. If it appears identical to the image above, your web browser is not colour managed.

 

Leave a Reply

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