Many websites by default use a white background for maximum contrast (with black text) so I am wondering if there is a case for a very light grey background to be used instead because it comes up as less glaring on the screen plus it also allows the designer to use white as a subtle highlight in specific user interactions.

Are there specific reasons why white is preferred over a very light grey background, and if so are there some strategies that can be used to mitigate some of the known issues for having white background?

  • 1
    Actually, I think pure white isn't so much a preference as it is a default setting in designers. I've heard and read many designers arguing for non-pure-white backgrounds. It's easier on the eyes. There is such a thing as too much contrast. – Marjan Venema Mar 14 '16 at 7:38
  • @MarjanVenema any good references that you have come across? I would hate to think that we do things because that's what other people do - many great mistakes in life have happened like this :p – Michael Lai Mar 14 '16 at 21:26
  • I don't personally, but I have favorited an User Experience question on the matter: Is there a problem with using black text on white backgrounds?. The accepted answer has a couple of references. – Marjan Venema Mar 15 '16 at 7:02

The only benefit of choosing a white background over a light grey background is that it arguably gives you a broader range of text colours that you can use, and still remain within accepted usability and accessibility guidelines.

In other words, if you want to use blue text you would be able to use a slightly lighter shade of blue on a white background, than on a light grey background.

It's also important to keep in mind that the colours perceived on users' screens vary based on the gamma settings on their screens (especially important with the new release of Night Shift on iOS (New in version 9.3: http://www.apple.com/ios/updates/), and also based on the environment they are in.

This last point is important to this question because in bright sunlight, on a mobile device, the white background paired with very dark text could result in a better reading/viewing experience because you actually need the brightness on the screen to be as high as possible.

I think your point about a benefit of the light grey screen being that you can use white as an accent is problematic. Whilst your accent is not text, you still of course want it to be noticeable, but the contrast between a very light grey, and white, might well be too little for your accents to be helpful and accessible.

There's also then an aesthetic aspect to this. Of course within reason it is beneficial to have an aesthetically pleasing UI, because it is both perceived to be, and ends up actually being easier to use (barring any actual usability issues of course). The User Experience comes out of not just the UI, but also the emotional reaction to it, and to the brand of the product, and to the beauty of it. White backgrounds arguably are more compatible with a wider range of colour schemes (that would be used for graphical features, text and branding), and currently I think personally that the connotations of white imply minimalism, simplicity and beauty more than light grey (overall..I know that is very debatable :) ).

Here is a helpful colour contrast checking tool, by the way: http://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333


I'm not sure about strategies to mitigate a white background but if light grey works best and allows you more versatility with the layout color scheme, then by all means use it. If you think it's less glaring than a white background then why not create a mockup and run a quick user test to see what users prefer. Otherwise your rationale for a grey background sounds perfectly fine to me.

Source: a common sense beginner ux'er

  • The problem with being a UX designer is that people ask for your opinion, but you have to back it up with other people's opinions :D – Michael Lai Mar 14 '16 at 21:26

I think it doesn't really matter for the healthy users as long as the content is easily readable. However, you should consider testing the contrast for the color blind and visually impaired users. A way to do it is to use the NoCoffee Chrome extension which can simulate a lot of vision impairments. You need to test the Low Contrast Sensitivity.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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