I notice that some LCD monitors, especially on laptop computers, have extraordinarily low contrast between light blue and white when viewed from "above" the screen. Even on my home desktop computer I must tilt the monitor up to differentiate between i.e. the Stack Exchange notifications that are new (light blue background) and those that are read (white background). Until recently Gmail had similar issues, but now I see that they have changed the colours there.

Is there any way to simulate this condition for testing websites and other applications?

I know of the wonderful Redshift which alters the screen output to appear redder, so I suspect that at least a software solution would be possible. I would like to avoid buying an affected LCD monitor for work if I can simulate this effect in software (Kubuntu Linux). Perhaps there are monitor settings that I could perform to get this effect as well, but nothing that I've tried has been very effective.

Do other designers account for this condition, and if so, how?

enter image description here

  • It'd be interesting to try to figure out what actually happens when you view the screen off-angle. Does that lower the contrast? lower the luminance of the colors? Increase the blue value by 50%? If you could figure that out, simulating it would be trivial.
    – Perchik
    Jul 10, 2014 at 14:51

3 Answers 3


Encouraged to post this as an answer instead of a comment, I'd suggest looking at: https://github.com/SlexAxton/css-colorguard

It is a tool that uses the CIEDE200 algorithm to detect color collisions and seems to incorporate a number of variables and not just contrast to detect collisions.

They most likely did not design this algorithm to take care of the specific situation of off-angle LCDs, but I would assume that it should do the job allright.

Additionally, you might take into account that windows computers don't ship with any sort of color management by default.

I was implementing a design incorporating both white and a light shade of grey, recently. It looked great on both mine and the designers macs. But once I tested it on a PC, the colors where indistinguishable. I thought it was due to the poor display, but after booting my mac in windows I realized that the problem was actually due to the lacking color management in windows.

We ended up compromising the design and choosing a darker shade of grey. But I actually regret this today, as the site did not look nearly as nice and the ability to distinguish the two colors did not have any semantic meaning after all, so the only thing users with poor displays would miss out on would be the icing on the cake. What I learned was to approach colors like I approach web development - graceful degredation: don't aim for 100% consistency accross devices, but rather make sure that the important parts are consistent.


I'm not aware of any software that specifically deals with this issue, one work around could be to run the two colours you are concerned with through a colour contrast checkers such as: http://webaim.org/resources/contrastchecker/

Although designed for foreground and background this could be adapted for your requirements.

If the returned contrast ratio is too low then you are likely to encounter this issue? You wouldn't require the contrast ratio between these two colours to conform to WCAG guidelines but setting your own contrast ratio baseline would provide you with a guideline?

  • Thank you. It seems that other colours are also affected, there are not 'just two' colours that I could test for or even just avoid. Thus, I would like to test, not guess, what needs fixing.
    – dotancohen
    Jul 10, 2014 at 20:44
  • Mostly same approach, but just came across this earlier today, as it was featured on Smashing Magazine: github.com/SlexAxton/css-colorguard
    – zkwsk
    Jul 11, 2014 at 12:29
  • @funkylaundry: That looks more like an answer than a comment, go ahead and post it as such. If you can show that it addresses the colour examples in the OP, that would most certainly be the accepted answer.
    – dotancohen
    Jul 12, 2014 at 14:57

What you're looking for implies to have, for a series of screen types, a function that transforms their respective rendered gamut for every possible viewing angle on a half-sphere (or quarter or eighth of sphere if symmerty applies) if you need the complete view or on 180 (or 90) degrees if you only need lateral transformations.

Although doable from a mathematical and programming perspective, such a software needs to be fed with a lot of data than will be most probably gathered with display analysers (like X-Rite for instance) positionned on a large set of sample angles.

I am afraid this data gathering work has not been done (there is already some work and time involved when you only need to know about the gamut as seen from an orthogonal viewing angle). You might however make contact with such manufacturers to ask them about the need you shared here.

  • I don't really need a half-sphere, but rather about a quarter of a circumference! There is no left-right issue that I am aware of.
    – dotancohen
    Jul 10, 2014 at 20:46
  • @dotancohen Sure. Edited my answer.
    – Pierre
    Jul 11, 2014 at 7:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.