When designing a web app or map, it is important to realize that the colors you see on your monitor may not be the same colors somebody else sees on their monitor or mobile device. Perhaps you may have noticed that one of your monitors looks a little “off” compared to a second monitor, or maybe a map you designed looks different on screen when compared to a printed copy. This is because your monitor color settings may not be calibrated correctly. Most modern flat panel monitors will have on-board controls to adjust various display settings like brightness, sharpness, and contrast. Often they will come with preset options like “theater mode” or “game mode.” These work well for the average consumer, allowing them to quickly pick a color setting that looks good for their preferences. However, if you’re doing color sensitive work – cartography, web development, photography, etc – you don’t want the monitor to just “look good,” you need your monitor to display as close to true colors as possible. This will ensure that content created on your computer will display as accurately as possible when viewed on a wide array of devices – devices which may or may not have been properly color calibrated by their user.
So how do you color calibrate a monitor? There are two basic ways to do this, the first involves purchasing a device that can sense the color output of your monitor and automatically adjust settings. These devices are very accurate, but are more aimed at professional photographers and others who perform extremely color sensitive work.
The second method for color calibrating a monitor involves using test images and adjusting various hardware and software settings. This method is sufficient for most web developers and GIS professionals, and depending on the make and model of the monitor, should yield sufficiently accurate color display. If you’re using Windows, there are some basic built in settings accessible via Control Panel > Display > Calibrate Color:
This wizard will take you through some easy to follow steps and will yield a rough monitor calibration. More information is available from digitaltrends.com, including information on performing the same task in MacOS.
I prefer to fine tune the calibration on my monitors a bit more, however. I use some test images from lagom.nl that allow me to properly adjust settings on both the monitor itself, as well as settings in the operating system or video card settings application. Here is the first test image, which assists in adjusting contrast. When properly calibrated, a monitor should display roughly equal steps in brightness over the full range from 1 to 32 for each color:
Adjust the contrast setting on your monitor until you can just barely see the first color bar, and you can also see a division between each subsequent color bar. Here is a link to the complete set of monitor test images – each image tests a different setting and gives some instructions on what setting to adjust:
If you are using an NVIDIA graphics card, they provide some excellent utilities and information on how to properly calibrate monitor color:
https://www.geforce.com/whats-new/guides/how-to-calibrate-your-monitor
Matt Callahan's Blog 📝 