Recently I was designing the home screen UI for a device. Putting a background photo is not something new, but it is always good to do so because it creates the emotional bond with users compared to a dull single-color background. As I approached it, it didn’t get as easy as I expected.

Things get complicated when the photograph is customizable by users. Because it’s hard to make sure the texts or icons on the photograph are always legible (Think of the pretty white background with white text on top of it). However, several solutions are out there. The most usual way is to put a condensed shadow behind the icons/texts, as Chrome OS home screen indicated. If you want even more eligibility, blurring the image (e.g. OS X Mavericks) might be a good idea because it un-sharpens the clutter image behind. Last, given that the identity for the Windows new system doesn’t allow any shadow, the only one way to guarantee the white text is always visible on a customized photo is to have the image darkened or keep a 5~10% black opacity layer.

However, none of these get to the level I want my design to be. Because using any black shadows or desaturation for the image will lose the genuine part of the image to some extent, I insist. I was stumbling a little bit until I discovered the little “trick” of the design for iOS7 lock/home screen.

As the following screenshot shows, I looked at my iPad screen and I suddenly found that it used white text on top of an image. Soon after I was curious of what it would be like if I put a 100% white background as the wallpaper. Then I couldn’t wait to test it.

I was surprised that the text turned to dark grey when it is on the light/white background. It is no longer white text!

Curiosity forced me to make more tests. How about the half-white-half-black background (white left and black right)? It turned out to be a different answer: there’s a black opacity shadow adding on the background (left image underneath). And when I made further test by placing wallpaper with more percentage of white and less percentage of black, the result was that there’s a shadow with the white texts for the upper part, while there’s a big area of black opacity layer for the bottom part (right image underneath).

To conclude, it generally has a line of code to detect the color of wallpaper and then returns various solutions to make sure the texts will always have enough contrast to read. That is brilliant! I got excited by the detail-obsessive mind of the designer. This is just for a simple home screen that everyone else could hardly realize. Applaud!