Are dark non neutrals colors suited for page backgrounds or is it more advisable to go for neutral colors like black or dark grey?

Question

I am just finishing up a site for a non profit and we are having a bit of a debate of about what the background color should be

I have been trying to emphasise on the need for a neutral color like dark grey as shown in the above screenshot while the director wants a dark green color like shown in the screenshot below :

My argument has been that the color contrast in the latter case is pretty sharp, while in the former case it's easier on the eye and hence the enhanced user experience. Are there any studies on what kind of colors should be used in the background?

The goal is to ensure easier reading when the user scans the site and reduce sharp transitions

Answer 1

The background you choose for your website has the power to set the theme and set the mood for your site at a glance. But the main aim of the background should be to enhance the visual experience and not to distract the user too much from the content.

Analysis:

• The image with grey background has more depth and there is a sense that the content area is to the fore. However the colour and texture do not match the theme of the content area which seems to be positivity, hopefulness and life.
• In the second image the plain coloured background means there is less differentiation between the content area and the background. The image appears flat; the background and foreground appear to be on the same level. This combined with the fact that the dark green colour is so strong, results in the background competing with the content area for the user's attention.

Suggestions:

Combine a low-contrast texture with a subtle gradient in a hue and saturation that compliments the content area.

Lets look at some examples of sites that do a good job on these elements:

...links for inspiration: labusdesign.com, thehappybit.com, www.lomahousevegexpress.com, designkindle.com/wp-content/uploads/demos/wedding-site-template/index.htm

Colour Theory

I don't have any research as such to share with you however this three part series on Colour Theory from Smashing Magazine will give you lots of helpful insights: http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/

Answer 2

The goal is to ensure easier reading when the user scans the site.

Practicality aside, colour is obviously emotively persuasive.

I would imagine that catering for the emotional well-being of your end users is as important allowing them to scan information easily.

• The grey you have chosen still provides a subtle contrast, partly because of the texture you have used. I think using texture in this way is a useful way of creating differentiation without creating distraction.

• Unfortunately, the combination of grey and your chosen texture strongly suggests the surface of a breeze block - which is quite a stark / industrial association.

• The subject matter of the site has a tendency to be potentially depressing - it's important to try to counteract this tendency through aesthetic choices.

• The green (colour) background provides a more emotionally warm effect - however the strength of saturation and lack of lightness is slightly oppressive.

Bearing this in mind, I'd consider choosing a different, lighter / brighter green and combining it with the texture used in the first example.

Answer 3

Don't fuss so much about the colors. It's more important to view the color differences, in other words, the contrasts. Color choices aside, by using a darker background you've now created a very visible rectangle where the content appears. This is an extra shape and you should ask yourself what you need it for. Suppose there would be no contrast between the background and the content rectangle (white background), in that case the rectangle would disappear. My guess is that it would invoke more calm and would be easier on the eye. Because the eye will be drawn to the text first, rather than the rectangle surrounding the text. Also the subtle colors in the header would become clearer. See what I mean?