Malcolm's Colortest: Adjusting your monitor

Adjusting your monitor
brightness, contrast and graphics settings
and some graphic charts to help you fine tune your system

greyscale contrast & brightness test
screen width and gradients above 256 colors
PC drivers and settings

Use this page to fine tune your monitor brightness and contrast and optimize your visual experience for any website. If you have your brightness or contrast tweaked too far by "sight" you may be missing shades of grey or color. If you've never adjusted the settings on your monitor using a greyscale chart this page is for you. It's easy! And you may not even realize that your monitor and graphics card may not be living up to their potential. Factory defaults often don't preset your system for the best possible color quality. And if you're one of those people that fiddles with monitor knobs looking for richer reds and adjusting by "what looks best" to the naked eye then your monitor is probably a little out of whack if you didn't use a chart of some sort.

Even if your system has the current, latest drivers and settings there are subtle variations in monitor gamma and brightness and contrast settings, and sometimes special calibration settings in scanning or image editing software (Adobe Photoshop, etc). You might need to calibrate your system to be able to experience a web site like this as fully as it was intended to be seen, or to print colors that look close to what you see on your screen. If you design web pages you really should read this page about Proper Gamma (Brightness) for Cross Platform WWW Images that explains why it's more or less hopeless to try to design graphics that look good on both Mac and PC systems.

We have a few short charts and examples that you can use to adjust brightness and contrast for your system. This is especially useful if you are in 256 colors or less, and some of these images can be used to help determine how many colors your system is set for and the screen width if you aren't sure.

Greyscale chart:

You should be able to see all the patches below as 21 distinct squares from black to white on the top level and in reverse on the bottom level.

[greyscale chart]
Greyscale graphic from John Henshall's Line-up Charts article at Epicentre

adjust your brightness and contrast
If your monitor is set to at least 256 colors you should be able to adjust the brightness and contrast on your monitor so that the greyscale strip above shows as distinct colors. If many of the black boxes are indistinguishable then you need to adjust it so you can see the varying levels of grey to black.

Screen width? Gradients? if you can see these lines...
If your system is set for 640x480 screen mode you should see this colored line below just about totally filling the screen, with a slight left indentation from your browser's default margin. We trimmed 30 pixels to account for screen borders, etc.

610 pixels wide

The line below should more or less fill the screen width if you are set for a 800x600 screen setting. In 640x480 screen mode you will have to scroll to see it all. Again, we trimmed 30 pixels so the image displays as 770 pixels wide instead of 800. If you are in 1024x768 or a larger screen width you should see gaps on both sides.

770 pixels wide

Both lines have color gradients that should show as smooth transitions from one color to another if your computer is set for more than 256 colors. If you see a "banding" of distinct colors instead of a rainbow prism of gradient shades then you are probably set in 16 or 256 color mode. AOL and Netscape browsers have options for graphics that might effect image quality. Turn graphic compression off in America Online settings for better image quality. Netscape may dither to it's own 216 color map. Check your software settings and learn what the graphics settings do.

about PC color settings

A PC running Windows 3.1 or any PC defaulting to a VGA monitor mode is limited to 16 colors even if the hardware is capable of more colors than that! Some systems come set with maximum 256 color mode but there may be an updated video card driver available free online allowing a higher graphics setting. Many of the default Win95 drivers in the initial Win95 release didn't take full advantage of a graphic card's capabilities. I found driver updates for my card that expanded the display resolution considerably. Any monitor better than VGA (S-VGA, multiscan, etc.) should support a full color spectrum. Some graphics cards as of a few years ago had very limited memory on the card and need more memory to display hi-res colors or larger screen widths.

If you're using larger than a 800x600 screen setting hopefully you have a large monitor. Unfortunately it's a difficult design compromise trying to make web pages that can look ok in 640x480 and anything above 800x600. You're probably used to noticing that by now if you surf the web in hi-res mode...

Drivers and system settings

Many PC systems come configured to less than optimum setting because they are configured to defaults or lacking current drivers for the graphics cards or Operating System. Consequently many Windows PCs are running in default 640x480 screen size with driver set to 16 (vga) or 256 (basic svga) color mode when there is a possibility the graphics card will support 56,000 or 16 Million and larger screen sizes with the right configuration settings or newer drivers. You have to be a pro-active and vigilant end user, on the watch for and aware of potential system upgrades for your OS and hardware (graphics card, monitor, printer) if you want to get the most out of your PC (or Mac, etc). You should know or learn what hardware and software is used in your system and check the web sites of those hardware and software companies to get the latest patches, bug fixes and drivers for your system. It's hard to have a system that is truly up to date and new drivers and software upgrades can make a big difference in performance or reliability of your computer.

In Windows 95 you can check the settings for your monitor and graphics card by opening Start|Settings|Control Panel|Display and clicking on the Settings tab. This screen will show your color depth settings (from VGA to High or True Color). Change Display Type will show your currently used drivers for your graphics card and monitor.

If you are gonna tweak...
Remember, adjusting contrast and brightness on your monitor by "sight" will likely throw your system out of whack, use a greyscale chart to adjust for proper brightness and contrast if you need to adjust your monitor. Due to the differences in gamma and brightness in Macs and PCs many web sites don't look right even if your system is properly adjusted - readable background/foreground color settings in text and background colors may look fine on the screen of the page producer and be seen very differently on another system.

Feel free to bookmark or link to this page as a handy reference to adjust your monitor settings periodically.

Selected links for drivers
and graphics configuration info:

Microsoft Win95 patches and drivers

Apple support info

the box: basic monitor adjusting

Computer Monitor Lineup Charts

Michael Shaffer's Display Management Page

CGSD's Gamma Correction Explained

Proper Gamma (Brightness) for Cross Platform WWW Images