Grow your CSS skills. Land your dream job.

How Should We Calibrate Monitors for the Web?

Published by Chris Coyier

When designing for print, having a properly calibrated monitor makes all the sense in the world. If done perfectly, what you see on the monitor should look like what you get on paper from a printer. No surprises.

When designing for the web, there is no physical byproduct in which to match color. We designed it on a screen, for a screen. So what does calibration matter?

One school of thought is definitely for it and suggests fancy devices. They might also suggest that there is more to calibration than screen-to-paper. Calibration is all about adhering to a known standard. So if you worked in a team and you all had well calibrated screens, you could be sure what you are looking at is what they are looking at.

Another school of thought might be to purposely have crappy calibration. After all, the vast majority of people visiting just about any website can't be counted on to have nice calibration, so if your site looks good and readable even with garbage calibration, it should be good for everyone.

I haven't spent much time thinking about this, as it's never come up as a problem for me. I think it's interesting though, as there is apparently some strong opinions about it. If you have one, I'd love to hear it.

Thanks to Clay Doss for sending in the question.

Comments

  1. Permalink to comment#

    calibrate, for all the reasons stated by WC.
    AND accept most of the visitors won’t see it the way you intended.

    • Daniele
      Permalink to comment#

      “AND accept most of the visitors won’t see it the way you intended”

      Sad but true.
      However, my opinion is not to focus too much about calibration in order to make it a need; Everyone should get the best from your color palette with or without a calibrated monitor.

      I have an old crt monitor that render colours more darker and ‘fired’ than any other lcd monitor; I use it as fallback: if something looks good both on a lcd and the crt monitor, will look good everywhere, postcards too ;)

  2. Permalink to comment#

    I’m using a calibration tool called Spyder2express and I think it’s pretty useful!

  3. Evil Dr
    Permalink to comment#

    How about this brainless thought – make calibration EASY, and make it CHEAP! In the UK we are expected to pay over £65 for the Spyder3Express device, but my 24″ monitor only cost £120.

    At that rate it pays to just put up with crappy calibration. How about Windows doing the job for me…???

  4. The best approach to screen colors is most likely to have several monitors, which doesn’t sound like much of a solution. I think the only time I’ll ever find myself really toiling with colors is if there’s an apparent legibility or usability issue on my PC monitor, then I think you have to find a safe mid ground. Sometimes you can’t win every battle!

  5. Permalink to comment#

    I don’t think there’s any need to spend money on professional calibration equipment geared towards top end print, photography and film work, but you do have to work on good quality, reasonably calibrated kit.

    Work on the web is going to look totally different to different people with different monitors, so the main thing is to ensure that the version YOU see is spot on. Otherwise you risk getting in the situation I’ve been in a couple of times when working in house for clients with crap kit, when the designer asks me “What happened to the pale green background” and I reply “What pale green background?”

    That said, it does also pay to have a very quick look over on a crappy laptop screen or similar to ensure there aren’t any whoppers, like pale coloured buttons disappearing etc.

  6. Ryan
    Permalink to comment#

    I definitely don’t think everybody in the office should be calibrated. I as the developer I have to constantly tell our designer to put more contrast in certain things because it looks great on his super-calibrated mac and crappy on my never-calibrated PC. There are some things he produces that are just unreadable in some scenarios, or I can see something in dark spots that didn’t show up on his monitor unless you really really looked for it.

    I would say about once a month I see something on my screen that he couldn’t see on his. He uses a $150 tool to calibrate… so I think it’s safe to assume that his screen is right.

  7. Permalink to comment#

    So you guys think it’s a good investment to buy a monitor calibrator, like Spyder 3 or something?

    120 euro’s is much money for a poor guy like me.

  8. Permalink to comment#

    Obviously, with the plethora of machines and various devices out there, perfectly accurate representations of our work is simply impossible. Thus, no need to be psycho obsessed about calibration, but still, taking 5 minutes to calibrate is a small easy step to some sort of a standard, even if that standard is purely among creative professionals. An intelligently designed site will always look good on any screen, but if I can have slightly more consistent polish for the critiquing eyes of my fellow designers, I’d be a fool not to do it. I wouldn’t go to the extreme of calibrating all my machines, but feel it’s important to at least calibrate my primary monitor.

  9. kristincurrier
    Permalink to comment#

    Most of my work focuses on tonal and color corrections and color changes for retail web photography on an ecommerce site, as well as graphic design for the same site. My argument is for a calibrated and high quality monitor, but like Shoutyman, I look more for tonal/gamma than perfect color. Not that I don’t aim for excellent color – it’s just not with the same precision as CYMK (which I’ve also done). Every monitor is different. I can’t tell you how many times I’ve color corrected a red leather tote to perfection and then someone in a non-design department working off a blurry CRT comes up to me complaining the bag looks purple. Color perfection will never be attained, but with the quality of monitors improving for most users, it is worth it to err on the side of caution and design for those users. I use the Mac’s calibration software and that is perfectly fine for web.

  10. Calibrate if you can afford it :) but it’s not the end of the road if you don’t.. personally, I think experience also counts. Over time, you’ll realize that there are colors schemes and/or gradients that should be used with caution. I’ve had clients who actually contradicted each other – one saying the color was dull and the other saying it’s not.. hehhe..

    Until the world finally decides to have just a single manufacturer for all Computer Displays.. I think Color Calibration is not the answer for all of our color issues.. it’s just a means to adhere to standards.. at the end of the day, it’s still the user who has the final verdict..

    Perhaps color calibrated eyeglasses?

  11. Bienvenido Del Rosario
    Permalink to comment#

    Options:
    1 – Nice IPS monitor calibrated
    2 – Nice TN monitor default
    3 – Crappy TN monitor default (Laptop)

    As I see it, a nice calibrated (1) monitor is more useful for team development and for print.

    As a freelancer I try to emulate the average user experience so I can produce the best results for them. Here’s my setup:

    A 17″ HP laptop (3) with an external 23″ monitor (2) extending the desktop, so I can code and then see the result on the laptop panel instantly. I just use the external monitor to check for over saturation, color variations, etc.

  12. Permalink to comment#

    I think it’s important to work to some kind of standard, and for that reason you should make an effort to have properly calibrated equipment.

    It is however vital that you see the final product the same way the majority of your visitors will, so you need to test on a variety of hardware including a poorly calibrated display.

  13. Permalink to comment#

    I’ve noticed using light grays on my site on a white background that people can tend to struggle with seeing the grays depending on the screen.

  14. Permalink to comment#

    Calibration doesn’t make much sense as far as the end result goes since even a simple thing like light conditions will skew the perception of what is displayed on the screen.

    Also if pretty much no-one on the other end will have a calibrated screen, there is no right or wrong way of fine tuning the display. Of course extremes like over or under saturation or “warm/cold” color schemes should be avoided, but it is hardly worthwile to adjust the settings with a help of expensive equipment.

  15. Color is a subject as diverse as they come, with perception being the most important value.
    So I would suggest testing on every screen you can with as many different people as you can, to get the best overall impression of the real world quality of your design.

    This is what I have done, and it’s proven itself an effective technique to give me a perspective of how the outside world sees my designs.

  16. Permalink to comment#

    It definitely is a bigger problem than most people think. I recently designed a website with a specific tone of green dominating the header. It looked awesome on my HP 24″ which is somewhat calibrated. It is a deep, yet fresh color. On the monitor next to it, a 3 or 4 year old 19″ LG the change is dramatic, it looked like this ugly pastel vormit colour, totally ruining the feel of the design.

    And then there is how colour is perceived. If you actually pay attention particularly to the non black and white colours in different settings of light, distance and background contrast, your eyes will perceive the colour totally differently.

    I’m not sure what the solution is, I don’t think there is an easy one. I would hate to be limited by a very small safe palette. We definitely cannot rely on sophisticated devices, things are only going to get worse.

  17. mrtom
    Permalink to comment#

    Why is it an either or?

    Do both. Check it looks good whilst calibrated, and check it looks OK at a few known non-calibrated defaults/simulators

  18. Permalink to comment#

    And another point – even if you are going to choose your colors that match a “neutral” calibration range, what about users that have some form of color blindness? What does that do for your designs?

  19. I have a perfectly calibrated monitor, and I use it exclusively when I’m brainstorming or working with color. I also have a economy-level monitor that I use as a secondary. Whenever I’m working with color and textures (especially with elements at low opacities) I drag the image over and see how it looks. Typically I have to make subtle changes that result in a much better image in the economy monitor, and an image that looks slightly less nice in my higher-end monitor.

    Using this method allows me to check differences quickly without breaking my concentration or flow. I think that, in general, we need to be more concerned with contrast than color. If someone with a shoddy monitor views your work, its not like they are going to say, “Man, these colors look awful” because they view everything that way. If however, you cannot see an element as well due to contrast issues, thats a much bigger problem. In a way, their window to the internet world is a little less clean.

    • I’m also running a 2 monitor setup, on the one side I have my prize Dell 24″ which is calibrated and on the other side I run a consumer Viewsonic.

      Greens and yellows are often quite different on each display but all colours are a bit different , putting the browser half way across the screens is good for sorting the contrast though I often let colours ride, preferring to go with the absolute values I know rather than adjusting for the fuzzy-colour consumer model.

      An argument I go along with is people acclimatise to the display they are used to so if your design looks good compared to the competition on your displays then it’s likely to equally good regardless of the monitor comparatively.

      Wait till web TV is in full swing and we have to deal with the crappy rendering of TV display reds and I genuinely hope that NTSC and Web-TV technology are 100% incompatible or we’ll be in display hell.

  20. jimmy
    Permalink to comment#

    nice !

  21. I usually don’t have an issue with colors looking correct. Rather, it’s contrast that’s the issue. On a crappy screen, subtle lines tend to get blown out against bright white backgrounds and light grey text becomes illegible.

    One technique that can help is to check your designs in black and white. That way you can tell if elements are being separated by just hue, or if there really is enough difference in value. This is also a smart idea for accessibility reasons, because lots of people in the world are color blind to varying degrees.

  22. Permalink to comment#

    Some good points brought up here. I agree with one of the comments above. As designers we have to make our work as accessible as possible, despite the often limited accessibility and/or fragmentation of technology.

  23. Permalink to comment#

    I’d be very interested to see a poll for this topic (aimed specifically at web designers) so we can see the numbers of those calibrating vs not.

  24. I say calibrate! Which reminds me I must do my monitors soon! Espically important i think on a dual monitor setup!

  25. I calibrate, therefore I am.

  26. LIsten2Me
    Permalink to comment#

    You need 2 screens. One calibrated, one default. Design on the calibrated one and proof your design on the default. If on the default you see your colours don’t contrast well or it fails in some other way, go back to the calibrated monitor and make some adjustments. It’s the same concept as building in Firefox and then debugging in Internet Explorer.

  27. Les
    Permalink to comment#

    It’s simple: you MUST calibrate – even for the web. imo.

    Some commentors are saying “why calibrate if everyone’s monitor looks different anyway…” – in fact that’s precisely why you should calibrate – your design should at least start with the right color.

    Don’t go from bad to worse. Exert what control you do have by starting with correct colors and minimizing display issues as best you can. Then test your design on multiple screens, adjust if necessary (audio engineers test mixes in different environments as standard practice – in the studio, the car stereo, mp3 player, home stereo, etc).

  28. Permalink to comment#

    I think we all agree. We should calibrate and test on less quality monitors. Simple.
    Annoying too :)

  29. Permalink to comment#

    I don’t use any calibration devices for my web workstation. I have a decent monitor that I’ve calibrated visually.
    When talking about the web and colors my opinion is that gamma is more important than actual hue. Rule of thumb: open photoshop, create black to white gradient. If it’s smooth, you’re ok. If you have bending, calibrate.

    If you do some print too, then calibration device is a must.

  30. Permalink to comment#

    I have come across this problem a lot. I design primarily on my macbook pro but also either have a second monitor attached to it or my other pc booted up to speed up workflow. I have a standard cheapo 22″ LCD on this , not a bad screen but the colour replication on it is worse than most. Even when plugged into my macbook, my mac screen colours and the secondary displays colours vary vastly, same with when it is running off my windows pc i have even tried calibrating them to be the same without any success.

    Downstairs i have a cheapo CRT and the colour replication on that is once again different.

    My opinion is do not spend to much time worrying about it, maybe compare two contrastrating screens and make your decisions from there. The chances are that if your site does not display well on some persons screen most sites will not either, so they will be used to it and not even notice.

    Cheers for the article chris! I look forward to the next screencast.

  31. Permalink to comment#

    I’m with the school of thought where we do not calibrate, if it looks good on an average monitor, than that should match what the majority of the average joes use.

  32. 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).

  33. JT
    Permalink to comment#

    It’s probably worth mentioning that ambient colors and light temperature can effect the perception of your monitor as well. A 6500k bulb and neutral grey background behind your monitor will help to keep your eyes seeing what’s going on.

  34. Permalink to comment#

    I never spent much time on calibrating my monitor in a special way for the web. To be honest, I hope that my Mac is doing a good job in finding out the best calibration automatically. But at the end of the day, the colors will be different depending on operating system, browser and many other factors anyway.

  35. Permalink to comment#

    Every uncalibrated monitor will be off in a different direction — too light, too dark, too contrasty, too flat. The advantage of calibrating to sRGB (the most accepted standard for Web work, approximating cheap monitors) is that you’ll end up in the middle of the (crappy) pack, which is about the best you can hope for.

    A related issue is whether you should embed ICC profiles (Apple calls them ColorSync profiles) in your JPEGs. There are strong opinions on both sides of that question; it’s especially troublesome if you’re trying to get a background color in your JPEG to match a flat HTML- or CSS-defined color. Last time I checked, only Safari supported embedded profiles, although they can be switched on (not easily) in Firefox. But perhaps more browsers support them since I last looked.

  36. Permalink to comment#

    As a designer I think We all should use great monitors while doing work…..

  37. Permalink to comment#

    I use an uncalibrated Apple HD Cinema Display to do web work on. It’s probably already very close to being perfect. All the web designers in an agency I worked for used uncalibrated monitors too. We just checked the designs on a few computers in the studio.

    The biggest issues you have with modern LCD displays is the lower end TN models that show a gradient from top to bottom even on solid colours, these are the monitors that most people are likely to buy, and you can’t calibrate for those.

    I do understand why designers do calibrate, but I don’t think it’s 100% necessary if you already use a good display. Especially ones like the Apple displays which you can only change the RGB and Gamma values on the computer’s graphics card rather than the monitor itself.

  38. I believe you should calibrate your monitors and use sRGB for the web.

  39. I find it funny (and frustrating) when people position themselves so wide apart when it comes to deciding best practices (if it were about the TRUTH, where it’s not possible to have two absolute truths, that’s OK).

    Wouldn’t it be wise to simply having all the team calibrated their monitors to the same standard, so they can all work on the same issues and having the site tested afterwards in many types of crappy calibrations?

    It’s just as normal as using solely Firefox as browser when it comes up to develop, and then testing the website on the three popular versions of IE.

    I recommend testing for crappy calibrations, because I have already had troubles due to client’s poor monitors. They complained about the layout having no subtle details, thin lines etc, but in fact they were there. Their monitors, though, weren’t reproducing those details because they were too bright.

  40. Permalink to comment#

    I think it’s probably important for us to calibrate our monitors. I see many people correlating poorly calibrated monitors with the internet being “ugly”. I think it’s really just different. Sure, not everyone calibrates their monitors, but do those people expect the internet to look “good”? Personally, I want to make sure my sites look good for the people who have their screens calibrated because there’s a good chance they expect more than the people that don’t.

    That being said, I don’t go out of my way to buy expensive gear to get it perfect. I think there’s a happy medium for web folk.

  41. Permalink to comment#

    On the one hand, I’m for calibration. Seems to make sense that if you design to a standard, users simply have to match that standard to see the design as it was intended. However, I’m willing to bet that 99% of users don’t have their monitors calibrated to any particular standard, and those that do have probably calibrated to a handful of different standards, so there is no way to predict what type of calibration your design will be displayed with for John Q. Public. That being said, calibration may not be worth the effort. It seems to me that the best practice is to design with enough contrast that your design maintains a reasonable appearance even with poor calibration.

  42. Andrew Byrne
    Permalink to comment#

    I personally have
    1X 1280, wide screen, main display – color calibrated
    1X 800×600, 4:3 secondary display – off calibration

    Design to push the boundaries, with the lowest common denominator in mind.

  43. I don’t see calibration as a big issue for web. I do however think one should test their colors on a laptop screen, as they often don’t have as much contrast and whites blends into grays.

  44. Permalink to comment#

    Well even if your monitor is calibrated, what’s to say the user of your website have anywhere near decent displays or graphic cards

  45. Permalink to comment#

    A while ago i designed this webpage which on my screen had a greenish color scheme. But after the site launched i saw the design on some else his macbook and the colors where more yellow.
    In my eyes the design fell apart…

    So I guess with some color schemes a bit off calibration can make a huge difference. I think its important that your calibration is good so at least most of your visitors see it how you intended it. You can’t count on other calibrations and screen qualities cause there are just so many and staying in basic colors is’t the way either.

  46. Kevin
    Permalink to comment#

    I think it’s important but you can’t expect people to see what you see.

    It happened in a web application project that the persons who started to build the GUI, had, let’s say, “a normal screen”. When I got it displayed on my computer which has a LED monitor with wide gammut, everything was so saturated that is was ugly on my computer while good on theirs.

    So, I think that if you calibrate your screen, it’s more for your own benefit unless you work in a team where graphic related hardware is the same for everyone.

  47. Iván Flores
    Permalink to comment#

    Nice tool to calibrate monitors.

    http://www.lagom.nl/lcd-test/

  48. Since the majority of the screens on the shelves are (at least more or less) adjusted or even calibrated to the sRGB Colorspace the need for calibration has become less important.

    More distracting is the mixed use of profiled images in the use of the design which are on a calibrated display very well matching and on another system not at all. Especialy since not all browsers are capable of showing profiled images correctly.

  49. kaeptn
    Permalink to comment#

    I do calibrate, especially before presentations. And in my opinion everybody should do it, if there is a printversion (flyer, magazin..) of the website in question. I had long discussions with graphic designers after or during presentations on a crappy calibrated monitior or even worse a beamer about color differences… Those discussions bore me to death. And I also think the difference between before and after is in most of the times very amazing.

  50. Permalink to comment#

    I was considering getting a shiney new Apple screen to sit happily beside my iMac, so I could design in the glow of a gorgeous LED setup.

    However, after consideration, I’m sticking with my 8 year old, crappy Philips monitor, simply for testing whether a design which I produce on my iMac screen will actually look decent on a screen which I guess the majority of internet users still have. So many times I’ve sat back, thought “this looks good”, only to drag it over to my second screen to see that the subtle greys and the gradients don’t stand out – huge pain, but at least it allows me to cater for older setups.

  51. Permalink to comment#

    We have always tested cross browsers on different monitors, but you guys are going miles further to do it.

  52. Permalink to comment#

    I agree that it’s useful to have a calibrated display for we design, and I certainly can see the point of doing this. But, at the moment, I don’t have a fully calibrated display. I work on a cheap laptop at the moment, due to current financial constraints. So, I’ve used Windows 7’s calibrator to optimise my display as best as I can, and I also have the standard sRGB profile installed, which I switch to when needed, to see what most internet users would likely see. But, when I have the cash to pay for it, I’ll be working with a 3-monitor setup. One monitor will be a fully calibrated widescreen display (the best I can afford), the other will be an optimised laptop monitor and the 3rd one will be an old LCD monitor (non-widescreen) that only uses the standard sRGB profile.

  53. silk
    Permalink to comment#

    I don’t really see any point in calibrating a monitor for Web design (with the exception of a team of designers collaborating on a project). The whole purpose of colour-calibration is to synchronise one device with another device. Whose monitor do you plan on calibrating yours with, given that just about every monitor in the world is not calibrated (also bearing in mind that colour calibration does not only relate to the device, but also to the environment—the room, lighting, etc—that the device is operating in)?

    My (admittedly not very humble) opinion is that Web designers should set the profile of their monitors to sRGB, and be done with it. Anything more is a waste of time.

  54. Permalink to comment#

    I always run a monitor with “out of the box” settings on it, as I figure that’s how most of my visitors will see my site. That’s the monitor I test my sites in.

  55. Permalink to comment#

    As a web designer I think it’s really important to have my monitor calibrated so I can match colours on screen with clients printed material. So when they see the design on my screen it looks correct and everyone’s happy. There’s no point calibrating for print because every printer provides different results and most people just want the text content, so I tend to hide most unimportant images with a seperate print css file.

  56. Felipe
    Permalink to comment#

    Having a proper color workflow is a must have for designer, doesn’t meter if the work is for paper, print or video.
    I’m a color manager consultant and I’m very pleased to see a post about this, let me share some of my experience.
    You really doesn’t need to have more than one monitor. You can use a “soft-proof” method simulating many different color devices, even bad monitors.
    The design files needs to be created under the Adobe sRGB color space, because this space is small and it is a very well guessed color space for general propose consumer displays and printer. Using that color space guarantee that there is no difficult to reproduce colors on your file.
    As may people already sad, it’s better to play safe and don’t use difficult to display designs, but again, it’s possible to predict the erratic behavior by “soft-proofing”.
    It’s also important to understand that the cheapest monitor calibrated is much better them a pricy one without calibration, doesn’t mater if you buy the U$2.000 monitor because it is not perfect, all devices are erratic unique.
    And at last, the biggest difference between displays are the brightness, each year they are more bright and ofuscating, people generally dim them when reading. There is not a really safe route here, just avoid too bright or to dark designs because they will appear washed out or profoundly low contrast respectively.

    I’m Brazilian, so sorry about my bad english skills.

    My CSS code doesn’t have bugs, just unexpected features.

  57. I use a 13″ laptop connected to a 23″ Dell IPS monitor (quick calibrated, without using hardware). On my latest web project I used quite a lot of light gray tones, until I tried viewing the design on my laptop. On the laptop, from most viewing angles, none of it was even remotely visible, while it looked clear as day on the IPS monitor, from all angles. I’m glad I tested it before sending it to the client.

    I use the IPS because I like the idea of knowing that my work is done to a certain standard, but I use my laptop screen for usability testing.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".