Transparency problem with different monitors

I created a png with a 10% opacity in photoshop. It looks perfect on my laptop and phone. However when I checked it on another person’s monitor you could barely see the image. Then when I checked it on my tablet you could not see the image at all. I guess it has something to do with the settings of the monitors? I dont know where to start debugging this. Any direction would be appreciated.

enter image description here

In the above image you can clearly see the faded girl.
On some monitors and my tablet she doesnt show.


The issue is with the color calibration of the display/tablet/etc.

I actually had a similar problem with my dual monitor setup. When I got the second monitor I forgot to calibrate the colors so subtle design details weren’t showing up in the other display, which drove me crazy.

Unfortunately, as Scott mentioned, you can’t control how other people calibrate their equipment. You’ll have to:

  1. “live with the consequences of designing on the edge”, or
  2. bump up the opacity of the background image in order to render as consistently as possible on more devices.

Yet another challenge chalked up to designing for the masses.

Source : Link , Question Author : Bobby Chambers , Answer Author : ckpepper02

Leave a Comment