I am looking for a red and a green hue that are equally discernable against a gray background on any PC monitor, using HTML/CSS-based application. There are many possible solutions to balance these factors, but none of them work well, and I don't know how to best implement it.

The gray could be a mid-gray (e.g., #909090). If, for example, I select a red and green similar in lightness and saturation hsl(h*, 100%, 25.1%), red RGB(128,0,0)(#800000) and green RGB(0,128,0)(#008000), the result is, at least to my eyes, far from equal. Red-on-gray is definitely more discernable than green-on-gray see image hsl red-on-gray and image hsl green-on-gray.

If I follow the CIELCh, wherein saturation can be defined as sat = C*/L* (Wilms & Oberfeld, 2018), a balanced pair could be this: red CIE-LCh°(ab) (D65/2°) = 34, 100, 57, rgb(164, 14, 0) (#A40E00, hsl(5.1, 100%, 32.2%)) and green CIE-LCh°(ab) (D65/2°) = 34, 100, 150, rgb(0, 103, 0) (#006700, hsl(120, 100%, 20.2%)). Now, the lightness from the HSL model does not correspond anymore. How can I satisfy all colour models? Admittedly, or maybe I am just going crazy and see what I wanna see, the pictures with the CIELCh saturation balanced version seems a bit more balanced to me, see image lch red-on-gray and image lch green-on-gray

Also, I don't know how (much) the gray factors in here in the perception of the colours, since they aren't presented against white.

I have a specific aim in mind: I want to run an online study (using a JS/HTML/CSS application, hence preferably HEX colors). Of course it is not possible to achieve a perfect balance in an online study where we cannot know the properties of the monitors, but the main measure is within-subjects, hence it should not matter much if there are some differences to a certain extent.

All in all, I just want to make sure that I use the "least worst" solution.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.