Mobile app version of vmapp.org
Login or Join
Sent7350415

: 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

@Sent7350415

Posted in: #Accessibility #Color #Contrast #White

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

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Sent7350415

3 Comments

Sorted by latest first Latest Oldest Best

 

@Goswami567

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.

10% popularity Vote Up Vote Down


 

@Kaufman565

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

10% popularity Vote Up Vote Down


 

@Bethany839

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme