I am advocating for the use of a grey background instead of the traditional white background colour for a couple of reasons (mainly to do with reducing the glare from reading on certain devices and also to highlight active fields for pages with lots of form input), but it seems like people have a preference for white background because it is 'standard'.

I am wondering if there's any way to determine the shade of grey that you can use which is light enough to mimic the cleanness of the plain white colour, but still provide enough contrast that it can be distinguished when juxtaposed to a plain white screen element (e.g. input field).

  • 3
    This depends a lot of the viewing environment and the eyes of the viewer – Zach Saucier Mar 21 '16 at 3:28

There are to many factors to account for to give a proper answer. A few variables to adjust for

  1. Eyes of the viewer
  2. Lighting environment of the viewer
  3. Quailty of monitor.
  4. Settings of monitor.
  5. Browser being used could effect color output as well.

I don't think there is a good answer for that. However, you might have a look at what Google considers good accent colors : https://www.google.com/design/spec/style/color.html#

In particular, they have this grey : http://www.color-hex.com/color/fafafa


I discovered a round-about way of answer this question that might be worth considering. This was an article discussing using the colour gray for text, and goes through the WCAG standards for contrast.

And the magic formula for using gray in text is 46% Brightness

Quoting from the article:

Knowing that light gray text is hard for users to read is not enough. It’s important for designers to know how light is too light. Without a specific standard, “too light” is relative. The World Wide Web Consortium (W3C), an international web standards organization, published WCAG 2.0. They are guidelines that specify how to make content accessible. It recommends that regular-sized text should have a contrast ratio of at least 4:5:1.

So the assumption I am making is that the reverse should also be true when you flip the application of background colour.

  • Not a good assumption, also monitors arent linear the same way so the problems are still same – joojaa Apr 6 '16 at 5:16
  • @joojaa care to elaborate on why this is not a good assumption (or at least baseline/starting point)? – Michael Lai Apr 6 '16 at 5:32
  • Its not that the measurement is bad. its just that devices are different. So going even close to the smallest visible is not viable because the variation is so great. – joojaa Apr 6 '16 at 6:18

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.