Validate contrast color functions #10776

@HesterG commented on GitHub (May 5, 2023):

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.

@HesterG commented on GitHub (May 5, 2023): From the reference post and github css styles, Looks like github is using [Relative Luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) to calculate the text color based on background color, where [calculation of RGB](https://gist.github.com/jfsiii/5641126) 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](https://www.w3.org/TR/AERT/#color-contrast) for calculation now. I think the relative luminance way will make the contrast between background and text color of labels look better.

GiteaMirror commented

@silverwind commented on GitHub (May 5, 2023):

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.

@silverwind commented on GitHub (May 5, 2023): 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast). Here is what the AI came up for such a question: [Go](https://www.phind.com/search?cache=caf30f80-e6d1-4ab7-836b-9912554331b6), [JS](https://www.phind.com/search?cache=f0a5d629-9cfe-48c0-b3da-6a3bd4fc138f).

GiteaMirror commented

@HesterG commented on GitHub (May 5, 2023):

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

@HesterG commented on GitHub (May 5, 2023): > 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](https://firsching.ch/github_labels.html): github's current css: <img width="443" alt="Screen Shot 2023-05-05 at 15 18 11" src="https://user-images.githubusercontent.com/17645053/236398129-02424c03-06bc-409b-8dbc-38d97f43355a.png"> And the labels look good in the [demo repo from the article](https://github.com/mo271/label_colors_test/labels) now

GiteaMirror commented

@silverwind commented on GitHub (May 5, 2023):

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.

@silverwind commented on GitHub (May 5, 2023): 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.

GiteaMirror commented

@HesterG commented on GitHub (May 5, 2023):

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.

@HesterG commented on GitHub (May 5, 2023): > 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.

GiteaMirror commented

@silverwind commented on GitHub (May 5, 2023):

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;"

@silverwind commented on GitHub (May 5, 2023): 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;" ```

GiteaMirror commented

@HesterG commented on GitHub (May 5, 2023):

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.

@HesterG commented on GitHub (May 5, 2023): > I would like to see the new functions modeled after CSS [`contrast-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast). Here is what the AI came up for such a question: [Go](https://www.phind.com/search?cache=caf30f80-e6d1-4ab7-836b-9912554331b6), [JS](https://www.phind.com/search?cache=f0a5d629-9cfe-48c0-b3da-6a3bd4fc138f). 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](https://github.com/go-gitea/gitea/blob/a1cd455c85678570e0f1b56065b1c1b9781eca7c/modules/templates/util_render.go#L159-L179) for scoped labels, scopeColor and itemColor are calculated based on luminance.

GiteaMirror commented

@silverwind commented on GitHub (May 5, 2023):

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 commented on GitHub (May 5, 2023): > 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.

GiteaMirror commented

@silverwind commented on GitHub (May 5, 2023):

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

@silverwind commented on GitHub (May 5, 2023): 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`

GiteaMirror commented

@HesterG commented on GitHub (May 6, 2023):

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 commented on GitHub (May 6, 2023): > 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..

GiteaMirror commented

current labels for reference

@HesterG commented on GitHub (May 6, 2023):

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

@HesterG commented on GitHub (May 6, 2023): 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](https://gist.github.com/jfsiii/5641126) [current labels for reference](https://try.gitea.io/HesterG/testrepo/labels) <img width="400" alt="Screen Shot 2023-05-06 at 11 32 47" src="https://user-images.githubusercontent.com/17645053/236596812-68b7bc23-d3cf-41ea-98f6-549037f4335d.png"><img width="400" alt="Screen Shot 2023-05-06 at 11 33 24" src="https://user-images.githubusercontent.com/17645053/236596815-4e940ea7-d491-4ea3-ac61-37f5f0b00a8c.png"> <img width="400" alt="Screen Shot 2023-05-06 at 11 32 31" src="https://user-images.githubusercontent.com/17645053/236596852-5956b0d7-d4de-4d0b-acdd-b88ec91551be.png"><img width="400" alt="Screen Shot 2023-05-06 at 11 57 04" src="https://user-images.githubusercontent.com/17645053/236598535-ef19d5db-d6fd-4725-9b11-0d760930708e.png">

GiteaMirror commented

@silverwind commented on GitHub (May 7, 2023):

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 commented on GitHub (May 7, 2023): > 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 ```

GiteaMirror commented

@silverwind commented on GitHub (May 7, 2023):

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.

@silverwind commented on GitHub (May 7, 2023): > left: use rgb directly (same as github does) right: use [rgb in relative luminance definiton](https://gist.github.com/jfsiii/5641126) Those on the right look great to me. Left side has many issues with too little contrast, right has none.

GiteaMirror commented