: What is the lightest shade of grey you can use for a background colour that is still discernible from plain white? I am advocating for the use of a grey background instead of the traditional
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).
More posts by @Sent7350415
3 Comments
Sorted by latest first Latest Oldest Best
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.
I don't think there is a good answer for that.
However, you might have a look at what Google considers good accent colors : www.google.com/design/spec/style/color.html#
In particular, they have this grey : www.color-hex.com/color/fafafa
There are to many factors to account for to give a proper answer. A few variables to adjust for
Eyes of the viewer
Lighting environment of the viewer
Quailty of monitor.
Settings of monitor.
Browser being used could effect color output as well.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.