Once you give users an intuitive graphical user interface, they won't want to go back to anything complicated.
My aim in this article is to explain in straightforward terms some of the issues that affect colour reproduction on the web. I want to pay particular attention to the differences between Mac OS X and Microsoft Windows. I hope this will be useful to designers and developers creating imagery for the web.
If you are just after the right settings to use on your computer and in Photoshop, you can skip to Best Practice Colour Setup for Web Designers. If you want to understand the settings, read on.
Let's begin by briefly discussing the main factors involved in colour reproduction.
This allows the perceived brightness (colour intensity) of images to be corrected between different devices. Gamma correction essentially shifts the perceived brightness up or down with the actual gamma value being a mathematical power in the calculation.
If you're up on maths (don't worry if you're not) you'll know the power value in the equation will translate a linear set of values (straight line) to non-linear values (curve). This being the case, a gamma value of 1 results in no correction. See Gamma correction for more details.
ICC profiles describe the colour properties of a particular device such as a digital camera, scanner, TV or computer. They can be embedded into images so that the precise colour setup of the capture device is retained when moving the images from one device to another. A colour management system translates the colour data to output a faithful reproduction on a target device that has its own ICC profile. See ICC Profile for more details.
The white point is essentially how the colour white is displayed, with other colours displayed relative to it. Most monitors use a white point known as D65 by default, which approximates the colour white in natural daylight. Intricacies aside, this can also be described as having a colour temperature of 6500K. See White point and Colour temperature for more details.
Here we're going to look at an example to highlight the problems with web imagery on Mac OS X vs Microsoft Windows.
Let's say that we have a perfectly calibrated screen attached to a Windows-based PC and an identical and equally well calibrated screen attached to an Apple Macintosh. We'll assume that the screens are set up with the same white point with operating system default gamma settings.
If we then opened up a web browser and went to the same website on each machine. You would notice that there was a considerable colour difference. So what's happening?
Browsers render colours and images according to an assumed standard profile called sRGB which stipulates that the display has a white point of D65 and a gamma setting of 2.2.
Apple still uses a default screen gamma of 1.8 compared to other computers and consumer electronics that generally use a setting of 2.2. This 1.8 setting used to have the benefit of producing a colour tone on the screen that is closer to printed media. The lower setting increases the perceived brightness and used to have the benefit of making the screen look more like paper and ink.
The colour differences are due to a combination of a different default gamma setting (1.8) in Mac OS X and the assumed sRGB profile of web imagery that expects the display gamma setting to be 2.2.
Embedded ICC profiles are ignored by all browsers with the exception of Safari. To be compatible with other browsers, if the colour profile is missing then it is assumed to be sRGB. While this not a cause of the phenomena described above, it can be exploited to produce some interesting demonstrations.
The default gamma setting in Mac OS X is a legacy value. Good colour management means that changing the display gamma setting to 2.2 for accurate web colour reproduction will no longer affect a print production setup. Almost all monitors are now designed for this target gamma.
Even Apple recommends a gamma setting of 2.2 for web and print in their colour guide for Aperture.
As a website designer and developer who uses both Macs and Windows-based computers, all of my screens are calibrated and use a gamma setting of 2.2 and a white point of D65 (colour temperature of 6500K). This covers about 94% of the users out there. The remaining 6% are essentially Mac users with the legacy default 1.8 gamma setting.
Hopefully Apple will have a default gamma setting of 2.2 in future releases of OS X and then at least the gamma issue will be behind us.
For web designers, I've put together a short guide:
Best Practice Colour Setup for Web Designers
By Nina Richards (24/4/2008)