Gamma matters
Thoughts about The Internet on August 12, 2011
The eighties were a simpler time. Publishers were happy if their typewriters came with eraser ribbons and users were thrilled if the text on their monitors appeared in white. However, with the advent of the Internet in the late nineties, publishers were forced to prepare their content for constantly changing browsers, ever increasing screen resolutions and – given the explosion of mobile computing over the last few years – a myriad of devices too.
The one thing that you could count on amidst all the change was that your reds would be red, your blues, blue, and your greens, well, green; but how about the terracotta reds, lime greens and cerulean blues? With the increasing age of today’s computer screens and the growth of new display technologies, you now need to consider the influence of color shift and gamma on the colors in your designs too – especially on the colors in between.
If you’ve never heard of gamma before, it’s simply an indicator of how bright your mid-tones are. The concept was crucial in the design of CRT monitors and holds true even for LCDs. It has no effect on black, white and primary colors, but affects everything in between.
The image above illustrates how this photograph appears on my four year old screen with a blue color shift on the left – notice the cooler hues – and how it appears on my new screen with high gamma on the right – notice the dark mid-tones. Of course, you’re probably wondering what I’m talking about, because your screen’s color calibration is entirely different from that of mine. In fact, to you the image may appear washed out on the left and warm on the right.
Sadly, there is neither substantial research on the average color shift and gamma of screens around the world, nor is there a perfect solution to ensure that your colors are reproduced in the exact same manner on every screen. However, you can do a few things to save your designs:
- Calibrate your screen’s colors to prevent your designs from being tainted by a color shift.
- Preview your templates on screens with different levels of gamma, just as publishers test their content on multiple browsers. Try an old laptop, a brand new desktop and so on.
- Embed color profiles in your images so that users with different color profiles can see them as they were intended. Most modern browsers handle this well.