Validate contrast color functions

[silverwind]

Backend has at least 2 implementations of a contrast color function, frontend has one.

This post has some potentially useful insights for the calculation. We should ensure the functions work the same in backend and frontend, and ideally also check if there are any existing issues where the function outputs suboptimal colors.

[HesterG]

From the reference post and github css styles, Looks like github is using Relative Luminance to calculate the text color based on background color, where calculation of RGB is also different by definition (But I also find github just use the RGB values directly or maybe I misunderstood something). We are using color contrast for calculation now. I think the relative luminance way will make the contrast between background and text color of labels look better.

[silverwind]

I think our methods are similar to GitHub with the exception that GitHub also has/had the bug with the grey shade mentioned in the post.

I would like to see the new functions modeled after CSS contrast-color. Here is what the AI came up for such a question: Go, JS.

[HesterG]

I think our methods are similar to GitHub with the exception that GitHub also has/had the bug with the grey shade mentioned in the post.

Actually this has been fixed using exatly the suggested solution by the article:

github's current css:

And the labels look good in the demo repo from the article now

[silverwind]

Thanks. I don't see the need for us to do this in CSS (which I think is clumsy and not unit-testable) but we should do the same they do, only in Go and JS. We can use the demo repos colors for our own unit tests.

[HesterG]

Thanks. I don't see the need for us to do this in CSS (which I think is clumsy and not unit-testable) but we should do the same they do, only in Go and JS. We can use the demo repos colors for our own unit tests.

Yep agreed.

[silverwind]

For reference, demo label colors. Will be useful for our tests:

style="--label-r:215;--label-g:58;--label-b:74;--label-h:353;--label-s:66;--label-l:53;"
style="--label-r:0;--label-g:117;--label-b:202;--label-h:205;--label-s:100;--label-l:39;"
style="--label-r:207;--label-g:211;--label-b:215;--label-h:210;--label-s:9;--label-l:82;"
style="--label-r:162;--label-g:238;--label-b:239;--label-h:180;--label-s:70;--label-l:78;"
style="--label-r:112;--label-g:87;--label-b:255;--label-h:248;--label-s:100;--label-l:67;"
style="--label-r:0;--label-g:134;--label-b:114;--label-h:171;--label-s:100;--label-l:26;"
style="--label-r:228;--label-g:230;--label-b:105;--label-h:60;--label-s:71;--label-l:65;"
style="--label-r:216;--label-g:118;--label-b:227;--label-h:293;--label-s:66;--label-l:67;"
style="--label-r:255;--label-g:255;--label-b:255;--label-h:0;--label-s:0;--label-l:100;"
style="--label-r:43;--label-g:134;--label-b:133;--label-h:179;--label-s:51;--label-l:34;"
style="--label-r:43;--label-g:135;--label-b:134;--label-h:179;--label-s:51;--label-l:34;"
style="--label-r:44;--label-g:135;--label-b:134;--label-h:179;--label-s:50;--label-l:35;"
style="--label-r:59;--label-g:182;--label-b:179;--label-h:178;--label-s:51;--label-l:47;"
style="--label-r:124;--label-g:114;--label-b:104;--label-h:30;--label-s:8;--label-l:44;"
style="--label-r:126;--label-g:113;--label-b:108;--label-h:16;--label-s:7;--label-l:45;"
style="--label-r:129;--label-g:112;--label-b:109;--label-h:9;--label-s:8;--label-l:46;"
style="--label-r:128;--label-g:112;--label-b:112;--label-h:0;--label-s:6;--label-l:47;"

[HesterG]

I would like to see the new functions modeled after CSS contrast-color. Here is what the AI came up for such a question: Go, JS.

I am trying to modify the luminance calculation function to use the one same as github. But not sure how is this "selecting the one with the highest contrast from the list" function suppose to help? I see the current contrast calculation for scoped labels, scopeColor and itemColor are calculated based on luminance.

[silverwind]

I am trying to modify the luminance calculation function to use the one same as github. But not sure how is this "selecting the one with the highest contrast from the list" function suppose to help?

To be truly universally usable, the function can not just return hardcoded black and white values. There is one case in the go codebase where it returns shades like #555555 and #aaaaaa. I don't know the reason for these odd shades, but to support arbritrary output colors, the user must be able to pass in this color list.

I do think we should make all functions return #111111 or #eeeeee so the function can be simplified to only accept a single color argument.

[silverwind]

I suggest we put the new functions in:

• modules/util/color.go with tests in modules/util/color_test.go
• web_src/js/utils/color.js with tests in web_src/js/utils/color.test.js

[HesterG]

To be truly universally usable, the function can not just return hardcoded black and white values. There is one case in the go codebase where it returns shades like #555555 and #aaaaaa. I don't know the reason for these odd shades, but to support arbritrary output colors, the user must be able to pass in this color list.

I see, do you know where this function is? I searched 555/555555/aaa/aaaaaa but I didn't find it..

[HesterG]

I tried to use the new luminance function with RGB channel values directly and RGB in relative luminance definiton respectively and got the following results, we might need to pick which one to use:

left: use rgb directly (same as github does) right: use rgb in relative luminance definiton

current labels for reference

[silverwind]

Maybe I was imagining things. Searching again, I can't find it anymore. The three instances of these functions are:

modules/templates/util_render.go:158:   luminance := (0.299*r + 0.587*g + 0.114*b) / 255
web_src/js/utils.js:149:  const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
models/issues/label.go:181:     brightness := (0.299*r + 0.587*g + 0.114*b) / 255

[silverwind]

left: use rgb directly (same as github does) right: use rgb in relative luminance definiton

Those on the right look great to me. Left side has many issues with too little contrast, right has none.

[HesterG]

left: use rgb directly (same as github does) right: use rgb in relative luminance definiton

Those on the right look great to me. Left side has many issues with too little contrast, right has none.

Personally I also like the right one better. Then I will go with the rgb calculation for the right one