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