Web browser color management test

Published by Fábio Pili on October 5th, 2010. Last updated on May 13th, 2013.
Your web browser is: unknown unknown

Read our browser color management guide for more information.

Does your browser support v2 ICC color profiles?

What do you see above?

Click to select

Does your browser support v4 ICC color profiles?

What do you see above?

Click to select

Additional tests

Monitor color gamut vs. browser handling of untagged elements

This test is designed to show how far your display's color gamut is from sRGB standard and how your browser handles untagged images and page elements.

A common problem for large gamut LCD monitors is that untagged elements are assumed to be on the full monitor gamut, leading to over-saturated colors on those elements. All tests below work only on color managed browsers: Firefox, Safari, and Chrome.

Read our browser color management guide for more information.

How far from sRGB is your display color gamut?



ProPhotoRGB tagged image vs. sRGB tagged image

The more difference you see on the bars, the further your display color gamut is from sRGB standard.

How does your browser interpret untagged images and page elements?


Untagged image vs. sRGB tagged image
Untagged CSS element vs. sRGB tagged image

According to the The World Wide Web Consortium (W3C), all untagged images and page elements should be considered sRGB by the web browser. If your web browser respects this, you should see perfectly seamless vertical bars above.

Comments

Charlie Jones
Jan 1st, 2011 - 21h00

Excellent content, providing much needed and user friendly information regarding the hows/whys and how-to-make-the-best-of the undesirable color rendering that wide-gamut display users will encounter when using various web browser applications.

I thought my new monitor and/or my calibration was messed up - thankfully I came across this website and followed the suggested steps for using Firefox - before wasting a lot of time chasing monitor/calibration non-issues.

Thank you so much for creating and providing such a useful resource for wide-gamut monitor users.

Charlie Jones

Jan 2011

Reply
Will
Aug 26th, 2011 - 17h54

Totally agree with Charlie's comment above. Just got a new PC and loaded up Firefox, having remembered some time from the distant past that it needed attention re colour management. This article is a nice succinct explanation of what to do and how. Excellent.

Reply
Neil B
Apr 12th, 2013 - 06h39

Hi Fabio,

IPad browser thoughts.

This is not something I've put much thought into 'til now, mainly advising a default colourspace for iPad display of images in portfolios etc.

These days, though, with reports coming from clients of their endusers il advisedly viewing and assesing image quality/colour on devices as random as even Blackberries I guess thought and policy is needed! Not that the Blackberry will ever pass muster for this.

Your "use of profiles" tests (used on a retina iPad) indicate that neither ICC v2 or v4 profiles are supported on iPad, that's on neither Safari, nor Chrome. I wonder if the wacked profile you made and mention on the Firefox thread might be at play here?

Interestingly, there's no difference between the ProPhoto RGB and sRGB elements illustrated.

Also the tagged/ untagged comparison passes the "looks identical" test.

So iPad is doing some things right. It must be reading the ProPhoto tag unless I am misunderstanding how you've configured the test?

Good resource, thanks

Mine's undergoing updates, the current version's at www.colourmanagement.net

Neil

Reply
Fabio
Apr 12th, 2013 - 14h37

Hello Neil.

My own results with iOS devices mimic yours perfectly. There's no support for color management on the built in browser (or any other app, as a matter of fact) and every element is rendered on the full display gamut. I found more information about it here. I assume this is a deliberate choice by Apple to save some processing power and battery life on those devices.

Gamut maps for the retina displays on the iPad 3 and 4 models show them to be very close to sRGB, with only minor differences, thus converting to sRGB and then importing the images on the iPads would give a reasonable, but imperfect, color match.

It would be possible, though, to connect and iPad to the computer using AirDisplay and to profile it normally as a secondary display. The resulting profile could be used to convert images before importing them on the iPad's photo app. This could give a us a color corrected image on the iPad screen.

Thank you for your comment,

Fabio

Reply
Christian
Jul 30th, 2013 - 12h19

Did these steps. But my colours in FF 22 are all washed out. I do run a wide gamut monitor (Dell 2407WFP-HC). Could it be the problem?

Reply
Devon
Oct 31st, 2013 - 05h01

Firefox 24 doesn't support ICC v4 color profiles which is what I use. Internet Explorer support both ICC v2 and ICC v4 profiles.

Reply
Fabio
Nov 1st, 2013 - 12h28

Devon, Firefox can read ICC v4 profiles embedded in images. ICC v4 display profiles are supposed to work, but I also had some problems in the past. I stick to v2 display profiles for better compatibility.

Reply
Mike
Mar 29th, 2014 - 19h05

Are there any browsers that display all untagged images and page elements as sRGB?

Reply
Fabio
Mar 29th, 2014 - 20h28

Yes, Mike. Firefox does that if properly configured. Check it out here.

Reply
Paul Coddington
Jun 3rd, 2014 - 03h52

Found this page very useful for evaluating alternative browsers.

Internet Explorer 11 on Windows 8 passes all your tests.

Google Chrome 35 on Windows 8 fails all your tests except the first one (v2 ICC).

Reply
Salah
Aug 2nd, 2014 - 16h01

IE 11 on Windows 7 pass all tests. On the other hand, Chrome 36 on Windows 7 passed the first test only.

Reply
Ionescu NIculae
Sep 9th, 2014 - 07h29

I am seeing a huge difference in color cast in the "Does your browser support v4 ICC color profiles?" . The above image is dark blue where the one below is mauve. why is this

Reply
diana
Dec 30th, 2015 - 04h03

Life saver! Thank you so much!

Reply
Dan
Jan 3rd, 2016 - 18h21

I am lost... For the test titled "How far from sRGB is your display color gamut?", I am seeing no difference on Microsoft Edge, but on Chrome and Firefox I am seeing the sRGB tagged (lower) image having washed-out blue. If this particular test concerns only my display's color gamut, why would there be a browser variance?

Reply
Alexander
Feb 4th, 2016 - 01h47

Firefox 44.0 (OS X 10.11.3) with color management already set up has a little bug (may need be reported). If you set background-color, say #ff0000, for empty body tag you'll get that nasty oversaturated color familiar to wide-gamut monitor users. But if you also have a div with background-color assigned or if it's just nonempty you'll get correct red color for both elements.

Reply
Fabio
Feb 4th, 2016 - 08h44

Thank you for letting me know, Alexander.

Reply
N07H1N9H3R3
Mar 13th, 2016 - 13h52

I had same problem with colors after upgrading system from Windows 7 to 10.

I found solution, in my case problem was in monitor color profile.

Odd things was happening, Edge and system was showing right colors but Opera and Chrome are not.

So just go to: Colour Management -> Devices -> Select "Display" from dropdown menu -> Mark Check box "Use my settings..." -> Than press "Add" lower -> And choose "sRGB ICE61966 2.1" profile from the list -> Now choose new sRGB profile and press "Set as default profile".

There you go! Colors now are right!

Reply
Johnny
Apr 29th, 2016 - 08h22

Thanks for the advice! It solved my issue.

I had the same problem upgrading from Windows 7 to 10. Edge was displaying colours properly. Chrome wasn't.

Chrome 50 still doesn't support ICC v4.

Reply
Harry
Mar 13th, 2016 - 22h07

I don't understand something in Windows:

In Firefox and Chrome

- I see the test "How far from sRGB is your display color gamut?" with the bottom row less saturated.

- The test "How does your browser interpret untagged images and page elements?" the bottom row less saturated.

In Edge, although it passes v2 and v4 profile test,

- "How far from sRGB is your display color gamut?" have identical rows

- "How does your browser interpret untagged images and page elements?" have again identical rows.

If Edge passes the profile support, how is it possible the "How far from sRGB is your display color gamut?" have identical rows?? Also if I move the Edge window next to Firefox, I see that both rows in Edge have the heavy saturated colors identical to the top row of the tests in FF.

Reply
andyo
Jan 18th, 2017 - 01h45

Hi, the explanation for this is that Edge doesn't convert to the monitor profile. If you have calibrated your monitor and built a profile for it (with a colorimeter, for example). Firefox does, and so does Chrome (v2 profiles only). So if you have a monitor profile, FF and Chrome will make use of it, thus properly displaying both the ProPhoto and the sRGB row, and since ProPhoto is a huge color space, it will look more saturated (basically will "fill out" your monitor's space, while the sRGB one will probably look less saturated, and the difference will be greater the bigger your monitor's color space is, thus "how far from sRGB is your display color gamut".)

Reply
Shawk Parson (Shahbaz Parsipour)
Sep 19th, 2016 - 04h58

many thanks as i can see some really useful info / tests etc here!

but i have an almost different problem regarding how Windows Photo Viewer handles the same image files as Photoshop AND Bridge ... (Windows 7 Ultimate, 64-bit on a not so new yet quite a powerful X58 mobo + 24GB memory blah blah machine built less than 5 years ago ... monitor: 22" Lenovo ThinkPad 1920x1200 ... not so great but much better than majority of the low to medium priced 1080 video monitors out there ...)

before getting into that though, let's say IE11 is showing the same color / contrast results to me as does Firefox ... (and Seamonkey too ... yes, i know: the latter is 'out of fashion' these days but i have my own silly reason for using it occasionally! didn't test Chrome and others because i don't use them a lot anyway ...) ;-)

back to the Windows Photo Viewer vs Bridge/Photoshop comparisons, i still use PS CS6 and its related Bridge for most of my image editing jobs on an almost daily basis ... (at times i do professional work too, with not much complaint from the clients who usually use regular-grade PC setups and totally different monitors on lower color / contrast / resolution settings ...)

long story short, WPV and Bridge show me similar results when viewing edited images especially, while PS does it somewhat differently, and let's say it does it much better than the other two! ie, PS does show subtle differences clearly when, say, an image is made up of several layers and then if it's saved in Merged format of the layers too, while if i view the two merged and non-merged files separately in WPB or side by side in Bridge, the two images show up the same ...

another similar issues is when i use ACR (version 9.x, which is the latest available for PS CS6 that is) and if i edit a RAW image, it changes considerably when i click on the open button and view it under PS directly, where the image's grain increases a lot, if not its color and contrast!

any clues on the above issues please?

many thanks again!

Reply
Shawk Parson (Shahbaz Parsipour)
Sep 19th, 2016 - 05h11

p. s. : btw, forgot to add that the tests here show me that ICC v2 profiles are set on both Firefox (latest version) and Seamonkey browsers on my system but ICC v4 profiles are not ...

curiously though, IE11 supports both profiles! but i don't use that browser seriously for obvious reasons! (and even more curiously, when loading this very webpage in IE, it says "Your web browser is: Mozilla 5.0" at the top of the page! :-/)

i have also manipulated the about:config page of Firefox as per instructions on this page of yours, http://cameratico.com/guides/firefox-color-management/, but didn't see any difference to take place in Firefox ...

there are also some very useful info here: http://epaperpress.com/monitorcal/profile.html (where i was guided to your website among other things) and the images there show the same in Firefox, Seamonkey and IE11 ... no difference!

thanks again.

Reply

Leave a Comment

Name

E-mail

Comment

Submit comment