Color Accuracy For Newbies

This is a long post, but it might be helpful for those who are not formally trained in color and color management:

The basic concept: If you generate anything that is to be viewed on a computer monitor, what looks great on your monitor might look awful on someone else’s.

Back in the days when we could get by with the official 216 “web safe” colors, people expected colors to be awful. These days, we must be much more careful. Most people to set their displays to levels of brightness and saturation that simply “look good”, but they can be far from providing an accurate representation of what you had in mind when you created your project. This tends to be more of a problem with the average PC users, but also with many Mac users as well. At the very least, we need to make sure that what we see when we create our work is as accurate as possible, because inaccurate color can become a problem when it arrives on the screen of consumers out there.

I recommend using a calibration tool such as Datacolor’s Spyder 5, or the built-in calibration tools with OSX – not great and totally subjective (see note below*), but is almost better than nothing. This will provide a starting point.

Note that Macs and PCs have slightly different standards in overall brightness and most Windows users crank the brightness of their monitors way up (Mac users who do not calibrate often do the same). If you want to see how accurate your own display is. Take a thin stack of of high-quality white paper (such as Hammermill Bright White) and hold it next to your monitor. The monitor is way brighter. Plus brightness and hue need to stay in balance (this is where the temperature setting in the OSX calibration tools comes into play).

Additionally, if users have a system that adjusts to compensate for ambient light - nighttime mode or whatever, this throws in another curve. And another is that many tend to turn the saturation way up. If you use bright colors in your design, do so in moderation, as what looks great on your machine might look like an acid trip on a badly adjusted PC.

If we want good color for mission-critical projects, this means checking things out on both platforms at typical user settings and then selecting colors that are somewhere in between. As most computer users run Windows, Mac-based designers need to shift their color slightly in favor of Windows.

  • An important note about subjective calibration (such as the basic tools with OSX) – around 20% of the population are very slightly colorblind and do not even know it. For example, it might not be easy for some to notice slight variations in extremely dark colors or in neutral colors.

One test of your perception is to create a new, screen-filling RGB document in Photoshop and fill the layer with a random, neutral color. Use your cursor to make a large-ish selection then drop on a Color Balance layer (make sure the selection is recognized as a mask). Twiddle with the color balance sliders until it looks absolutely, completely, totally, thoroughly, neutral. Now place your cursor anywhere within the adjusted area and look at the Info palette. If you’ve hit the target, the RGB values are identical. (Oops! Way off.)

While leaving that layer in place, move to another part of the screen, make another selection, and call up another color balance channel (again, using the selection as a mask). Now make your adjustments while watching the info panel until the RGB values are identical. Select the new Color Balance layer and drag it so that it abuts the first attempt and compare the colors. If you have a really good eye for color, the difference will be almost imperceptible. Almost none of us can pull this off.

Not to panic, though – there might be other factors at play, such as the viewing environment.

Ideally, if your monitor is accurately calibrated (including the right brightness and gamma), the right amount of ambient light (the overall brightness of the room) should be roughly that of an 18% gray. If you’ve ever seen the monitor hoods provided with high-end calibration systems, they are in a 18% totally neutral gray. It is also important that the area behind the monitor is as close to neutral as possible. If the walls are white, chances are that the paint is not a true white but that it has a bit of tone - slightly warm or slightly cool. Large colorful posters can throw off your perception as well. Strong lighting is also an issue, particularly if you work in an office somewhere. Where I work the office ceilings have several pairs of fluorescent ceiling lights. I gave half the tubes a half twist to turn them off and bring the lightning down closer to an appropriate value. Also see if you can have some sort of blend of incandescent and fluorescent light. Standard fluorescents have a bluish hue, incandescents are yellowy (which is why most indoor photos look too yellow). “Daylight” fluorescents with their more brownish hue can help quite a lot.

I once visited a color house in the major advertising market of Chicago. In order to impress their clients, the owner (not a color expert) put all of his operators in a near pitch-black room and dressed them in bright white lab coats that would reflect in the glossy monitor screens, totally throwing off their perception of value (the range of dark to light). A big annoyance for the technicians was that they would have to use Photoshop’s eyedropper tool to constantly take point samples of their colors as they worked and then wipe out all the samples from the info palette when they were done. I’m glad I didn’t work there.

If exacting color is not an issue, knock yourself out (but consider the toning down of bright hues), but if color is very important, a proper calibration device is a must-have. A Spyder (and competing devices) costs around $140 for monitor-only calibration. If you want the full circle covered (printer, scanner and monitor) these will cost more.

Sorry for the long post. I hope it will be of some use.


Thanks Trey, that was a great read.

Say I got my monitor properly calibrated, how do I get the rest of the world properly calibrate their monitor? :flushed:

You don’t, but it your monitor is calibrated, it means that the colors on their monitors will be one step closer to what you are shooting for. It’s not an “all bets are off” deal.

This is also where it is important to plan your color palette. We’ve all seen old movies that were produced in and era of black and white TVs and a population that, when they went to a movie theater, wanted to be blown away by color. In such films, differences in color were more important than differences in value and you might see titles in bright, saturated colors on a bright, saturated background. When digitized they are almost illegible, particularly when a viewer has the saturation on their monitor turned way up. We don’t have any control over a viewer’s saturation settings, but we do have control over relative contrast and relative color values.

Neutral colors are problematic in this regard, as it requires balancing the color wheel just right. For example, skin tones can easily become too red. If someone has richly tanned skin, tone it down to a beige. As for metals, a gold object can easily become too yellow, but if it is toned down to beige with a hint of yellow, it will still look acceptible even when someone turns up their saturation. The smaller percentage of color to start with, the less it will be amplified. One thing to keep in mind with neutrals is not to knock yourself out making it thoroughly, totally neutral, because a user’s settings can send it in any direction, so you should commit to nudging it slightly in the preferred direction. It is better for a face to look just a touch too red than a touch too green.

As mentioned above, lighter colors and tones are also a problem. When, for example you follow the fashion and use lighter type on a low-contrast background (such as a web page with light gray type on a white background) it might look great to you but very washed out to the average PC users.

1 Like