2

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).

Improve this question
1
  • 5
    This depends a lot of the viewing environment and the eyes of the viewer
    – Zach Saucier
    Mar 21, 2016 at 3:28

5 Answers 5

Reset to default
7

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.
Improve this answer
3

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

Improve this answer
3

Background Gray

We love to use #F1F1F1 and #F9F9F9. These are two shades of gray that we mostly use on our web projects as a background color or between sections (e.g. an horizontal line).

Sometimes we might go with #cecece as a background color when need to have white text on it.

Attention: #F9F9F9 might not work in all computer monitors, it is very subtle. We have a better experience using #F1F1F1 across older monitors as well.

Text Gray

#333333 or #cecece

Examples

enter image description here enter image description here enter image description here

P.S: This is our use case. Keep in mind that it will depend on viewers eye, computer monitor, etc like others have stated.

Improve this answer
3
  • 3
    Be aware that the WCAG Contrast checker is not very forgiving about some of these combinations. Then again, it's not very forgiving in general :)
    – Vincent
    Dec 18, 2019 at 12:55
  • Yes, and I agree. But, considering our market and users, this is not a problem for us.
    – RA828
    Dec 18, 2019 at 14:19
  • "This is not a problem for us" - maybe it is but you can't know because the people with whom it's an issue don't use your product.
    – Zach Saucier
    Dec 18, 2019 at 19:35
2

The lightest gray you can have at regular font sizes in RGB is #767676. Anything lighter does not satisfy the accessibility requirements defined by WCAG.

Fonts with 18pt and/or 14pt with bold can go to #949494. I assume this is because they are bigger and therefore can have less contrast.

These results were found with Google Chrome's Lighthouse.

Improve this answer
1

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.

Improve this answer
3
  • Not a good assumption, also monitors arent linear the same way so the problems are still same
    – joojaa
    Apr 6, 2016 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, 2016 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, 2016 at 6:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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