This post is part of the Ask a Designer series. You ask me questions, I answer them to the best of my ability. The questions can be about design process, branding, software, technical things – or even completely unrelated. Want to play? Leave me a comment here, or use the contact form.
Is there any way to compensate for the way colors appear on various monitors?
Unfortunately, the answer to this one is easy: no, it isn’t possible.
Aside from personally visiting every single potential viewer of your website and calibrating their monitor, there isn’t much you can do.
The colors on your website are specified by RGB or Hex values, which are universal and very precise – the way a math formula is precise. However, the interpretation of these values depends, first of all, on the monitor – its capacity to display colors, and its calibration. The calibration of each individual monitor depends on various factors. The older ones can be limited by less evolved technology, but even the newer ones quite often have default settings that are far from accurate. And if the user doesn’t know and/or care about calibration, there isn’t anything you can do about it.
Actual photos or graphics (as opposed to flat colors) can and often do have embedded color profiles to compensate for monitor differences. This has always been the practice when sending proofs for future printing, enabling to generate a fairly accurate preview on any screen, but some browsers are incorporating color management as well.
For an excellent explanation of how it works, and examples of color managed and color unmanaged images, check out this article: Web Browser Color Management.
The technology is evolving, and I hope that in the future both web browsers and monitors will find a common standard for colors. In the meantime, I would keep away from too subtle effects — very light colors on white can be invisible on some monitors, and dark rich colors can look black on others.
I will keep an eye out for color news and keep you posted on any future developments.