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
#800000) and green
#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) (
hsl(5.1, 100%, 32.2%)) and green CIE-LCh°(ab) (D65/2°) = 34, 100, 150,
rgb(0, 103, 0) (
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.