Is Color Calibration Necessary in Web Design?

Color calibrating monitors is an issue that’s existed in the design community for decades. But a recent Twitter debate between Amy Hoy, Peter Cooper, Thomas Fuchs, and Thijs van der Vossen about the subject raised a crucial question: is color calibration necessary in web design?

Thumbnail: Colorful Graffiti, available on Photodune

What is the Precedent for the Debate?

Color calibration began in the days of print design, and is still a very important issue for many designers working in the medium. Given the variability of color output in screens, combined with the differences in printers, designers have to calibrate their monitors and color profiles within the OS to match a standard in order to ensure proper color selection. This is where Pantone comes into play, as they provide an industry standard for color output. If your displays and printers are calibrated to the Pantone standard, then the color output (should) be accurate between the two.

OSX monitor calibration settings

As more print designers migrate, the question of standardized color output becomes more prominent. Does every monitor adhere to some standard akin to the Pantone standard? Should we calibrate our displays to meet the qualifications of this standard?

Thankfully, Microsoft and HP helped establish the sRGB color space, which has been adopted across most consumer level devices and is endorsed by the W3C. However, there is a lot of variability in device output; which ties back to the issue of calibration.

The Argument for Calibration

The greatest factor supporters of the principle bring to light is the importance of standards. We try to standardize everything (both as designers and developers), so why shouldn’t part of our design process (color selection) be standardized as well?

Chris Coyier posed the question to CSS Tricks readers recently, with a number of excellent responses in the comments. However, I feel the best argument for calibrating devices was presented by Shane Parker:

I don’t understand how this is even a question? Of course you should calibrate your monitor using known standards via a hardware calibration device. Will the majority of people who view your site also have a calibrated monitor? Of course not. BUT, it’s not like all uncalibrated monitors view the same way. Uncalibrated monitors are all over the place in respect to color, and that’s the biggest reason you should calibrate! At least you’ll know that you are calibrated to correct color so that those who are calibrated (or are using monitors that aren’t horribly off calibration from the start) will see the colors you intended them to see.

Garbage in = garbage out. If you start with garbage, you’re more likely to end up with garbage. As professionals, monitor calibration is one of the first steps in setting up a design environment (I’m a web dev and photographer, so it’s even more important for me to stay calibrated).

I agree with his argument: you should strive to be at the middle of the spectrum to reduce the offset from your audience’s devices. If your monitor is unwittingly skewed in one direction, then the results are going to be even more staggered on a device with a different calibration. At least when your devices are calibrated for the middle, the output will be “less wrong”.

The vast majority of designers seem to agree with his statement as well. The arguments against color calibration in web design are not admonishing the practice, but instead state that there are greater issues at hand than color tonality.

The Argument Against Calibration
(Rather, The Argument for Contrast)

The debate regarding color calibration cannot simply be defined as a “yay/nay” situation, because it comes down to an issue of priorities. Those who argue against calibration note the importance of contrast over proper color tonality in web design.

In a sense, if you know your display is adequate and “reasonably calibrated”, then you should not worry about achieving true color calibration. Instead, focus on accessibility and place precise and accurate colors as a secondary concern. Designs are meant to be easily readable and accessible. By focusing on color tonality with expensive and professional-grade equipment, the priorities of the designer are shifted in such a way that the user ends up suffering. While it can be argued that choosing the wrong tone of a color can change the user’s reaction to a design, there are two greater arguments which take precedent:

• People with bad displays are used to things being “incorrect”, because that’s the environment they work in. (Which Aaron Silber elaborates on quite nicely).
• With a focus of artistry, you can end up with a low-contrast palette which actually hurts your design upon execution.

Accessibility should always be at the forefront of site design, and focusing on color palettes based on subtle tonal shifts does not usually fit this ideal. Numerous examples can be seen at Contrast Rebellion, and it has been discussed many times on this site.

This one especially hurts because I love everything else about Reeder.

Interview With Patrick Kovacich
UI + UX Designer

I was able to interview Patrick Kovacich, a user interface and experience designer who also has a lot of experience with print (not to mention some of the coolest shirt designs I’ve seen) on the subject, and he was able to elaborate on the variability of device output:

It takes a certain level of genius and madness to come up with ideas like this.

I got my start in print layout before the web was much more than academic in use (mid-90s), and so I have a great deal of experience there. Even after moving over into web design and native application UI design, I have continued a lot of print projects on the side. I do primarily work on the web/screen, and the print work is the vast minority.

Visually, Adobe Fireworks and Adobe Illustrator. If I’m doing web work where the visuals are actually browser rendered I’ll use a plain text editor or Dreamweaver.

Mainly MacOSX 10.6, stock 17 inch Macbook pro screen (matte.) I do use a Windows 7 machine about 25% of the time, with a 20 inch Acer monitor and a Wacom Graphire tablet for some more artistic work. Most design work I do is not using a tablet, however.

No. The vast majority of my work is consumed by people who do not calibrate their monitor, and so I take deliberate care to not rely on contrast details that will only work on a perfectly calibrated cinema display or high-contrast-ratio plasma panel.

My target audience varies from iMac all-in-one displays to XP laptops driven by very cheap LCD panels, and so the value in me adhering to a set color profile and rigorously calibrating my display is not shared by my audience in the way it is by my print shops. I find that seeing proofs and sharing color profiles very easily resolves any issues I have had in working with them.

I tend to actually flip color profiles around to A/B test different configurations, and most critically, different brightnesses/LCD tilts. As more and more of my audience moves to laptop LCD displays and mobile devices, some of which have very narrow viewing angles, the hinge position of a laptop or positioning of a mobile device can actually alter a perceived color. This kind of real world experimentation lets me make sure that the critical parts of designs work regardless of the device and work environment my audience is in, and is more useful than assuming they will all adhere to my idyllic design conditions.

As I said, in print work there are ample tools to “translate” and verify we are on the same page with the end result, and print shops are generally capable of speaking a higher design language with me to get to a mutually satisfactory result. I do not have the luxury of demanding my on-screen audience go through this, and so I don’t worry too much about having my displays tuned to a standard that is meaningless to them.

Interview With Ian Yates
Webdesigntuts+ Editor

Ian Yates (our editor here at Webdesigntuts+ for the newcomers) was gracious enough to provide his thoughts on the subject, which I feel are essential to the discussion given his print-heavy background:

These days I work primarily in web design, though my first job within design was at a small ad agency in Rotterdam and definitely more print biased. I’ve been focused on the web for the last five years or so.

Owing to my roots being in print design and illustration I’m most comfortable with vectors. Sit me behind Adobe Illustrator and I’m a happy chap. Photoshop keeps me busiest where web design is concerned, which is odd as you’d expect Fireworks to have been a more logical home. I still always start out with pen and paper though – can’t seem to shake that habit :)

I have a quad-core Mac Pro with two Dell 22″ screens (which are great value). The Mac is only a couple of years old and was the logical upgrade from my old power PC, though if I’d have waited I might well have opted for a massive iMac instead. A nice, fat Wacom tablet is high on my wishlist, but there always seems to be something more sensible to spend my hard-earned pennies on.

When I was occupied with print, a lot of my work revolved around identity: logos, headed paper, stationery, exhibition stands, promotional materials etc. and that involved a lot of careful color work. A properly laid out visual identity package includes a specific Pantone palette, often fairly restricted, as more colors make for higher printing costs. Working with Pantone colors in your documents (instead of CMYK, for example) means that the printed result is a dead-cert; it will look exactly the same as any other printed products with those colors (assuming the printer does the job properly.)

When working for print, it’s advisable to calibrate your monitors so that what you’re seeing is as true to the actual printed output as possible. Personally I was hopeless at it. I was forever holding Pantone swatches up to my screen thinking “am I really using the right tone here?!”

In terms of the web, I’m not sure it’s so relevant. I haven’t really given it much thought before, because there’s no way you can emulate precisely how users see your work. These days, I go for default, out-of-the-box calibration.

I’m not sure you can. You have to accept that users have many different screens, different devices, and different calibrations. There’ll even be discrepancy between identical screens of a different age. It’s a fact that the majority of users probably won’t experience your work exactly the way you intended. Go for the mode average – most people will use their devices as they come off the shelf.

Conclusion

The Pantone standard works because the print industry widely adopted it, and practitioners consistently maintain their devices to ensure calibration. But the same cannot (and should not) be expected from most web users; some devices may never have been calibrated at all. This is where the “dirty window to the Internet” argument is most valid: the problem of your site not rendering properly on a display is generally a greater issue with the display itself.

If you have the time and resources to calibrate your device, or if having a wide color palette is essential to your work, then you should calibrate your monitor. However, in most cases, color calibration becomes a non-issue once a designer comes to terms with the fact there is no standard output on the web like there is in print. Instead, strong color contrast and accessibility are much more important factors which must be considered in web design.

It’s been a pleasure to write this article, and I hope everyone enjoys reading it as much as I enjoyed writing it! As always, feedback is greatly appreciated.