2

I often use a light shade of grey such as rgb(242,242,242) in my designs to provide a subtle contrast to white, e.g. for the background of alternating rows in a table.

I can easily distinguish between this grey and white on my display (a 27" 4K) but on other displays this is not always the case, which reflects badly on my designs and could impact user experience.

Reasons might include badly calibrated / poor quality displays.

Assuming all accessibility standards have been met, is there a 'lightest' shade of grey that:

  • Provides a contrast with a white background
  • Does not significantly impact the legibility of dark foreground text
  • Will be reliably displayed for most users under normal conditions
3
  • This a big challenge because depends on your user screen configuration. I need to make my e-commerce work on IE and I'm successfully using #EBEBEB. I know that is far from a perfect smooth contrast on 4k screens with perfect balance. But this is real life! :( Commented Sep 6, 2019 at 12:26
  • Good feedback - thanks! I've found some good information here as well: ux.stackexchange.com/questions/5362/…. As you say, it doesn't seem that there is a straightforward answer... Commented Sep 6, 2019 at 12:45
  • 2
    I solve this by using a border slightly darker than the background but not so dark that it stands out and appears black.
    – Ren
    Commented Sep 6, 2019 at 14:37

2 Answers 2

2

rgb(242,242,242) against #fff is about Lc 5, which is marginal even for people with good vision. It is below the invisibility point for many, depending on the spatial characteristics of the element.

For instance, a 1px line is going to be very difficult to see, but a 6px wide line, might be visible to some.

Per APCA guidelines, the minimum, if you want someone to see it, is Lc 15. Against #fff that is #e1e1e1.

You also mentioned that you have a 4K monitor, this makes a difference if you're using 1px lines on a 4K monitor, and somebody's displaying on a standard resolution monitor, such that that 1px line is now ½px, it's going to get subsumed very much into the background.

EDIT to add images to address Devin's comment.

What is the text in the targets below? Because #F9 against #FF is close to zero contrast on most sRGB displays.

The #f2 the OP mentions is about Lc 5, #e3 is Lc 14, e1 is Lc 15.2 (not much difference of course), and #c7 is the cutoff for any text at Lc 30.

#f9f9f9 Lc 1

f9 ff

#f2f2f2 Lc 5

f2 ff

#e1e1e1 Lc 15

e1 ff

#c7c7c7 Lc 30

c7 ff

Again, the spatial is key here. So is the quality of eyesight. Someone with significant contrast sensitivity deficits is going to have a hard time seeing even Lc 15, as will someone with detached vitreous, as an example.

12
  • I believe the information provided may not be entirely accurate. Even though I don't have perfect vision, I can clearly distinguish between the colors #fff and #f9f9f9, even in a relatively small space. I would go as far as to say that #fafafa is also discernible, making it a viable minimum for someone (in this case me). Additionally, the Material Design color used for separator lines was (though I'm not sure if it still is) represented as rgba(0,0,0,0.7), which translates to the HEX value #e3e3e3."
    – Devin
    Commented Aug 21, 2023 at 20:49
  • 1
    Hi @Devin Ah I see—Well technically, some might say WCAG 2 needs 3:1, but that's also ridiculous. Lc 1 is at the edge of perception for people with good vision like you. For good vision, Lc 5 is a minimum for something like a fat divider or zebra. But for impairments, not enough. Someone with low-vision contrast impairment at a PeliRobson 1.0 is going to see the Lc15 about like that Lc05, which is why Lc15 is the minimum threshold. As an example, I have impaired vision. Even with glasses & a few inches from display, I can barely read Lc30. Enjoy your good vision while you can.
    – Myndex
    Commented Aug 22, 2023 at 1:06
  • 1
    Hi @Devin what I'm going to say next may seem unintuitive. Everything about the human division system revolves around its context sensitivity and that includes the context of impairments. Part of the visual cortex ask as a sharpening filter, and if you went without glasses for a period of time, a couple weeks, things would not seem "blurry" per se, but you have a functional deficits in terms of the size of text you can read. Other compensations happen like contrast sensitivity gain adjustment, ... it won't seem "off" per se, until clinically measured.
    – Myndex
    Commented Aug 23, 2023 at 19:39
  • 1
    Hi @Devin continued: the point I'm getting at, is visual processing through your neurology presents the best interpretation of the world around you to your consciousness, however that is not necessarily an accurate representation of reality. Also, contrast sensitivity (CS) and visual acuity are two separate aspects of visual function. Someone could have good acuity (focus) but poor CS, or vice versa (though poor acuity does reduce CS a bit unless corrected).
    – Myndex
    Commented Aug 23, 2023 at 19:44
  • 1
    Thank you for the comprehensive answer @Myndex! Nice surprise to get such a good response to this question some years later! Commented Oct 7, 2023 at 19:21
2

Check this, you can find perfect colour https://webaim.org/resources/contrastchecker/

Your Answer

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

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