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
  • 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! :( – Rafael Perozin Sep 6 '19 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... – Matt Saunders Sep 6 '19 at 12:45
  • 1
    I solve this by using a border slightly darker than the background but not so dark that it stands out and appears black. – Ren Sep 6 '19 at 14:37

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, privacy policy and cookie policy

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