Advertisement
Workflow

Is Color Calibration Necessary in Web Design?

by

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.

QHow experienced are you with both the print and web design industries, and where do you primarily work?

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.


QWhat software do you use when designing?

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.


QWhat is your computer setup (Operating System, Monitor[s], drawing tablets)?

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.


QIn your opinion, do you feel it is important to correctly calibrate your monitor in order to reach the "baseline" defined by the industry?

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.


QIf not, then how can you ensure your monitor is close enough to a proper calibration that your color choices will translate well to the majority of your users; something that designers in favor of color calibration point to in their defense of the practice?

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:


QHow experienced are you with both the print and web design industries, and where do you primarily work?

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.


QWhat software do you use when designing?

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 :)


QWhat is your computer setup (Operating System, Monitor[s], drawing tablets)?

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.


QIn your opinion, do you feel it is important to correctly calibrate your monitor in order to reach the "baseline" defined by the industry?

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.


QIf not, then how can you ensure your monitor is close enough to a proper calibration that your color choices will translate well to the majority of your users; something that designers in favor of color calibration point to in their defense of the practice?

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.

Related Posts
  • Game Development
    Aesthetics
    Gamma Correction and Why It MattersPreview img notext
    Many game developers (mainly those that work with 3D graphics) often overlook this small aspect of how graphics hardware works, thereby introducing subtle visual artifacts that, while not instantly noticeable, still impair the look and feel of their game ever so slightly. Find out how to avoid this mistake!Read More…
  • Web Design
    Roundups
    Improve Your Web Design Workflow With Mac Computer Skills TutorialsMac computer skills roundup thumb
    Though the Web Design section here at Tuts+ is your home for all resources concerned with this fine art, we're joined by literally thousands of other tutorials on alternative topics. Many of these are pretty relevant so, in this roundup, we're going to take a look at some posts from our Mac Computer Skills section to see how they can help refine the workflow of Mac-equipped designers.Read More…
  • Photography
    Interviews
    Interview With Fashion and Entertainment Retoucher Nick Leadlay0968 nick leadlay preview
    I recently had some time to chat with Nick Leadlay, a fashion, entertainment and advertising retoucher based in Toronto, Ontario. Nick has worked with some big names in the photography industry, and has retouched some of the biggest stars in Hollywood including Jennifer Lawrence, Robert De Niro, George Clooney, Tom Hanks, Denzel Washington, and many more. In this interview, Leadlay and I talked about several topics including how he got his start as a celebrity retouch artist, and even a few workflow tips. Let's take a look!Read More…
  • Computer Skills
    App Training
    Organize and Edit Your eBook Collection With CalibreCalibreicon
    It's easy for your eBook library to get messy. Here's how you can use the cross-platform tool Calibre and its mirage of plugins to keep your books organized, formatted in the way you want, and supplemented with the other reading material you want.Read More…
  • Design & Illustration
    Interviews
    Interview With Photo Retoucher Pratik Naik0918 pratik naik preview400
    Recently, I had the opportunity to chat with Pratik Naik, a high-end retoucher based in the United States. Naik has worked with some of the world's finest photographers and has a lot of fantastic advice to share about the retouching industry. In the interview, we talked about about Naik's background, what tasks retouchers often perform, as well as what types of computers retouchers should use. Let's take a look!Read More…
  • Computer Skills
    Customization
    How to Calibrate Your Mac's DisplayCalibrate icon new
    Whether you work as a graphic designer, photographer or web developer - ensuring your Mac’s display is accurately representing colours can be the difference between the perfect edit and something that looks washed out! In this tutorial, we’ll explain why your display should be calibrated and the methods to do this.Read More…