How do I calibrate the colors for two monitors for web development?

Question

I have a Mac Pro with a dual setup running an Acer P243w and Samsung SyncMaster B2430. I have attempted making my own profile but have difficulty matching them.

Is there any better way to make my monitors match color wise? Do you have any tips?

My problem is that I am creating interfaces and the coloring appears to be 'off', between the two.

Answer 1

There some hardward-based display calibrators that usually cost $80 and up. Some names are "Datacolor Spyder3Express", "LaCie Blue Eye", "PANTONE huey".

An important issue with calibration for the web is to:

1. Calibrate with gamma 2.2. If you're on Snow Leopard, especially if you started with it on the Mac when you bought, then it will be gamma 2.2 already. But if you use Leopard or calibrated on it, you might have gamma 1.8, which is not standard for web (and doesn't fit Windows, which also has 2.2).

2. Learna about sRGB color profile, which was build for CRT monitors back in the day. Many browsers don't support embedded color profiles for images (Safari does support, though), which means they'll render uncalibrated, which means they'll be rendered in your (and other visitors') monitor' profile, which might be close to sRGB.

3. You should preferably export all your graphics without profile or with sRGB profile for them to display most propertly with all brosewrs.

4. Calibrating with Mac OS X build-in software calibrartion is possible but might require several iterations to get right. If your display has non-LED backlighting you should let it work for about 10 minutes before calibrarting or otherwise judge its colors, while the lamp warms up.

5. You're better off try to compare some images that have embeeded sRGB profile and the same that isn't and see if the colors match in browser.

Resources:

• A good place to test your monitor (but not calibrate color profile) is: http://www.lagom.nl/lcd-test/
• sRGB and other color profile information: Has great tests with hover-switching images to see how different profiles and no-profile images display on your monitor. http://www.gballard.net/psd/srgbforwww.html
• The above website has specific instructions on calibrating a Mac: http://www.gballard.net/photoshop/hardware_calibrate_monitor.html
• Calibration theory and some test images (even though more photography oriented): http://www.normankoren.com/makingfineprints1A.html
• Some Mac OS calibration process tips at http://www.khulsey.com/monitor_calibration.html

Also, S-IPS panel monitors have more consistent color reproduction at different viewing andles. If you have regular TN monitors, you might have a problem see them both at the same color from the different angles that you see them, even if each one is calibrated 100% when viewed hean-on.

And yes, it might take huge amount of time and a lot of disappointments, so be patient.