2

I am building an online menu for restaurants.

The default background color is a light gray (#f1f3f5). The default text color is black (#555555). Example

Many of the restaurants have asked to use a custom color for the background. At first I said no, because users are not designers and use colors awfully... but after many requests I am starting to investigate a solution.

The idea is to allow the user to pick any color. Then the color is adjusted within a range.

In particular we would like to keep a light background with dark text on it.

So the solution was to use HSL and force L to a minimum of 0.9.

It has a sufficient effect, but I am not 100% satisfied.

Is there any study about the acceptable color range for a full-screen background (saturation, luminance)?

Improve this question
3
  • After further investigation I have found that Chrome desktop itself, for the customizable Google home / Chrome theme, adjusts the color inserted by the user. In particular, for light background (luminance > 70%), it move the lightness to about 90% (not always the same). So I am correct. I have also noticed that it changes the saturation... I would be curious to know what exact formula Chrome is using.
    – collimarco
    Commented Jun 30, 2020 at 21:25
  • Why don't you just provide a set of colours that you think are acceptable and the user can pick from those. Like 10 different colours for example, and build the UI to promote selection of one of those set colours. Then also, hidden away somewhere, there is an option to set any colour they want. End of the day, if the user wants a bright red background then that's their choice to make.
    – musefan
    Commented Jul 1, 2020 at 6:27
  • If restaurants want the background color to match the identity color of the restaurant, it won't be easy to satisfy them with an automatically adjusted color.
    – jazZRo
    Commented Jul 1, 2020 at 9:02

1 Answer 1

Reset to default
6

Acceptable can be defined as something that is accessible to users. WCAG 2.1 / 1.4.3 Contrast (Minimum) requires contrast ratio between text and background to be 4.5:1 or more. From Understanding Success Criterion 1.4.3: Contrast (Minimum) we see that contrast ratio is calculated as:

(L1 + 0.05) / (L2 + 0.05),

where

  • L1 is the relative luminance of the lighter of the colors, and
  • L2 is the relative luminance of the darker of the colors.

Relative luminance of your chosen text color (#555555) is 0.09084171118340767. Minimum contrast ratio is 4.5:1, so our calculation now looks like

(L1 + 0.05) / (0.09084171118340767 + 0.05) >= 4.5

With little math magic we get

L1 >= 0.583788

So from the accessibility point of view acceptable background color has a relative luminance between 0.583788 and 1.

Improve this answer
3
  • Thank you very much! What is exactly luminance? How can I compute that? I thought that I could simply use the L from HSL, but for #555555 I get 0.33 and not 0.09 as you said...
    – collimarco
    Commented Jul 1, 2020 at 11:19
  • Ok found this: w3.org/WAI/GL/wiki/Relative_luminance So they call luminance different things...
    – collimarco
    Commented Jul 1, 2020 at 11:32
  • I don't know how luminance is calculated. I just used values from this color contrast calculator contrast-ratio.com and just thought they are correct as it calculates contrast the way mentioned in WCAG. :D
    – locationunknown
    Commented Jul 1, 2020 at 11:50

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.