Looking to see if anyone else has had to deal with the complexity of greyscale on various monitors not showing up. I’ve seen there is a bunch of stuff out there on this but I was wondering how people have dealt with this challenge. See image attached, notice the lighter grey area behind the buttons. This grey fails to appear on some monitors, i thought i would just darken it up a bit but, it seems that you have to go pretty dark before the grey shows up and then looks really dark on the monitors that do actually display it. I’ve also tried adjusting color/contrast/brightness settings on the monitor to get it to come in, most the time it doesn’t solve. I did get it to show on one monitor because it had “dynamic” settings but the others i tested don’t even have those settings available. I found on the internet that any light colors can have this problem, not just grey. I dont really want to sacrifice the design for these fringe monitors…?
Super frustrating! Thoughts?
I only see one color gray in the image. I use a MacBook Air. I don’t think that’s fringe.
Could you do an outline around the area that is supposed to be lighter? Would that mess up the design too much?
I’m not sure whether I can see it or not! Can you markup your image so I can see where the different colour is?
I’m on a MacBook Pro (this years model) – again not an edge case.
Here the bars that dont show up are highlighted in yellow. if you can see them just know that some cannot. I think on Macs you are probably going to see them, i am running into this on monitors in a regular office environment as well as on some flat screen TVs that we have in conference rooms. to clarify my original statement, the color isnt actually “behind” the buttons but the background of the buttons --if that helps.
I’m wondering if this is a coding and browser rendering problem, rather than a monitor display problem. Have you tested for cross-browser compatibility on different devices? If so, are you seeing the same results across multiple browsers?
Yeah, good thought, we are testing on many devices and browsers. When i say that the bars dont show up i am not saying that they are not there, you can still see the other elements of the bar just not that grey background. Below is how it looks when the bars are somehow not displayed correctly:
To be clear, then, the gray background was disappearing on the same device across browsers. Is that correct?
I can say with very good certainty, then, that it’s almost undoubtedly a monitor contrast setting, rather than anything you’re doing on your end.
I designed a set of custom reports recently that used a similar gray as a background for zebra striping rows (we used #f2f2f2, and it looks like you’re using a slightly lighter #f5f5f5). This showed fine on my computer, but our QA tester wasn’t able to see the zebra striping at all, despite confirming it was coded correctly. We ended up adjusting her monitor contrast and the issue resolved.
So long as you’re using any sufficiently light shade of gray, you’ll run the risk of this happening. Whether or not it does depends entirely on the quality and settings of the individual display.
For us, it wasn’t a huge problem as these reports are meant to be printed, so we didn’t take any steps to fix the issue. The only realistic fix, unfortunately, would have been to darken the background color, which means adjusting the font color as well to satisfy contrast accessibility requirements, as well as (possibly extensive) cross-browser and device compatibility testing to determine the “minimum visible gray.” For us, it just wasn’t worth the effort.
Thanks for the feedback everyone, here’s what I was able to figure out:
I obtained a grey scale image and brought it up on the trouble monitor, looked at the value that the grey “disappeared.” The original value I used was #F5F5F5. The monitor seemed to respond and show the grey at #F1F1F1. We decided to go with #F0F0F0 to maximize the chances that it would display properly. I also looked at some other websites where grey is displayed, such as in the gmail interface and found that they are using #F1F1F1.
Also, on a side note, I did find a setting on one of the monitors preferences where I was able to adjust the dynamic color and make the original #F5F5F5 show up however, on some other monitors I did not find a setting that would work.
Here’s a copy of the grey scale I used to test. If you notice, changing from #F0F0F0 from #F5F5F5 is hardly decipherable but apparently makes all the difference when it comes to monitor display of grey scale.
Great insight, thanks for sharing
I have been troubleshooting a similar issue today and thought I’d mention what might be causing the issue. As I design using light gray colors in the F range, they all show up as white on my external display. I find myself constantly dragging windows from my external monitor to my laptop’s native display to confirm color values. The reason is because my monitor is connected via an HDMI cable, and this forces the display into RGB Limited mode which has a limited color range from 16 to 235 (instead of 0 to 255).
See this article for reference and a potential workaround. Unfortunately, I’m not finding a workaround that works for me because my control panels don’t have the options mentioned, but I’m still hopeful. This makes design really challenging.
Another thing to note, our company recently installed large television screens in our conference rooms and we connect to them instead of using projectors. These screens have the same difficulty displaying light gray colors in the F range. I may modify some design decisions now that I understand why this is happening. It is frustrating when I go to present a design to a customer and they can’t see it exactly as it shows up on my monitor.