Web browser color management test
Read our browser color management guide for more information.
Does your browser support v2 ICC color profiles?
Aqua blue = ICC v2 profiles supported
Does your browser support v4 ICC color profiles?
Purple = ICC v4 profiles supported
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?
sRGB untagged vs. sRGB 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.
How does your browser interpret page elements?
Untagged CSS element vs. sRGB image
Comments
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
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.
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
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
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?
Firefox 24 doesn't support ICC v4 color profiles which is what I use. Internet Explorer support both ICC v2 and ICC v4 profiles.
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.
Are there any browsers that display all untagged images and page elements as sRGB?
Yes, Mike. Firefox does that if properly configured. Check it out here.
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).
IE 11 on Windows 7 pass all tests. On the other hand, Chrome 36 on Windows 7 passed the first test only.
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
Life saver! Thank you so much!
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?
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.
Thank you for letting me know, Alexander.
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!
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.
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.
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".)
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!
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.
Using version 58.0.3029.110 of Chrome on W10 Creators update, in the 'How does your browser interpret untagged images and page elements?' section, for the red and green colors the box is seamless (actually if I look closely I can see seams for the green but it's barely visible), but for the blue color both of the boxes have a lighter shade of blue on the bottom half.
Firefox 53.0.3 does the same thing. Except oddly it fails the ICC v4 check (probably not turned on by default).
Edge seems to pass everything. But andyo in his Jan. 18th 2017 reply seems to provide the reason why it passes the last two tests? (i.e. Edge doesn't use your calibrated monitor profile).
Good to see google in 2017 fails tests of W3C standards available since 2010.
Since Firefox 52.0, it does not work with monitor's color profile.
My config is listed below:
gfx.color_management.display_profile;/Library/ColorSync/Profiles/Displays/iMac-5F45A20D-D523-391B-6572-F81A6CB35FF4.icc
gfx.color_management.enablev4;true
gfx.color_management.mode;1
gfx.color_management.rendering_intent;0
How far from sRGB is your display color gamut?
In safari, the ProPhoto and the sRGB are differet,
In Firefox they are same, and like the ProPhoto is Safari
How does your browser interpret untagged images and page elements?
In safari, the untagged and sRGB are same and like the sRGB above.
In Firefox they are same, and like the ProPhoto is Safari
Now seems to be working fine also on Chrome: Version 61.0.3163.100 (Offizieller Build) (64-Bit)
So strange it was working for a moment, but now after restarting chrome it fails to correctly color manage again..
chrome->//flags->>Force color profile->SRGB
OK!