Modify luminance calculation and extract related functions into single files (#24586)

Close #24508

Main changes:
As discussed in the issue

1. Change luminance calculation function to use [Relative
Luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance)
2. Move the luminance related functions into color.go/color.js
3. Add tests for both the files (Not sure if test cases are too many
now)

Before (tests included by `UseLightTextOnBackground` are labels started
with `##`):
https://try.gitea.io/HesterG/testrepo/labels

After:
<img width="1307" alt="Screen Shot 2023-05-08 at 13 37 55"
src="https://user-images.githubusercontent.com/17645053/236742562-fdfc3a4d-2fab-466b-9613-96f2bf96b4bc.png">
<img width="1289" alt="Screen Shot 2023-05-08 at 13 38 06"
src="https://user-images.githubusercontent.com/17645053/236742570-022db68e-cec0-43bb-888a-fc54f5332cc3.png">
<img width="1299" alt="Screen Shot 2023-05-08 at 13 38 20"
src="https://user-images.githubusercontent.com/17645053/236742572-9af1de45-fb7f-460b-828d-ba25fae20f51.png">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>

3 files changed, 158 insertions, 29 deletions

diff --git a/modules/templates/util_render.go b/modules/templates/util_render.go
index a59ddd3f17..a26c0531f8 100644
--- a/modules/templates/util_render.go
+++ b/modules/templates/util_render.go
@@ -20,6 +20,7 @@ import (
 	"code.gitea.io/gitea/modules/markup"
 	"code.gitea.io/gitea/modules/markup/markdown"
 	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/util"
 )
 
 // RenderCommitMessage renders commit message with XSS-safe and special links.
@@ -133,7 +134,9 @@ func RenderLabel(ctx context.Context, label *issues_model.Label) template.HTML {
 	labelScope := label.ExclusiveScope()
 
 	textColor := "#111"
-	if label.UseLightTextColor() {
+	r, g, b := util.HexToRBGColor(label.Color)
+	// Determine if label text should be light or dark to be readable on background color
+	if util.UseLightTextOnBackground(r, g, b) {
 		textColor = "#eee"
 	}
 
@@ -150,34 +153,30 @@ func RenderLabel(ctx context.Context, label *issues_model.Label) template.HTML {
 	scopeText := RenderEmoji(ctx, labelScope)
 	itemText := RenderEmoji(ctx, label.Name[len(labelScope)+1:])
 
-	itemColor := label.Color
-	scopeColor := label.Color
-	if r, g, b, err := label.ColorRGB(); err == nil {
-		// Make scope and item background colors slightly darker and lighter respectively.
-		// More contrast needed with higher luminance, empirically tweaked.
-		luminance := (0.299*r + 0.587*g + 0.114*b) / 255
-		contrast := 0.01 + luminance*0.03
-		// Ensure we add the same amount of contrast also near 0 and 1.
-		darken := contrast + math.Max(luminance+contrast-1.0, 0.0)
-		lighten := contrast + math.Max(contrast-luminance, 0.0)
-		// Compute factor to keep RGB values proportional.
-		darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0)
-		lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0)
-
-		scopeBytes := []byte{
-			uint8(math.Min(math.Round(r*darkenFactor), 255)),
-			uint8(math.Min(math.Round(g*darkenFactor), 255)),
-			uint8(math.Min(math.Round(b*darkenFactor), 255)),
-		}
-		itemBytes := []byte{
-			uint8(math.Min(math.Round(r*lightenFactor), 255)),
-			uint8(math.Min(math.Round(g*lightenFactor), 255)),
-			uint8(math.Min(math.Round(b*lightenFactor), 255)),
-		}
-
-		itemColor = "#" + hex.EncodeToString(itemBytes)
-		scopeColor = "#" + hex.EncodeToString(scopeBytes)
-	}
+	// Make scope and item background colors slightly darker and lighter respectively.
+	// More contrast needed with higher luminance, empirically tweaked.
+	luminance := util.GetLuminance(r, g, b)
+	contrast := 0.01 + luminance*0.03
+	// Ensure we add the same amount of contrast also near 0 and 1.
+	darken := contrast + math.Max(luminance+contrast-1.0, 0.0)
+	lighten := contrast + math.Max(contrast-luminance, 0.0)
+	// Compute factor to keep RGB values proportional.
+	darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0)
+	lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0)
+
+	scopeBytes := []byte{
+		uint8(math.Min(math.Round(r*darkenFactor), 255)),
+		uint8(math.Min(math.Round(g*darkenFactor), 255)),
+		uint8(math.Min(math.Round(b*darkenFactor), 255)),
+	}
+	itemBytes := []byte{
+		uint8(math.Min(math.Round(r*lightenFactor), 255)),
+		uint8(math.Min(math.Round(g*lightenFactor), 255)),
+		uint8(math.Min(math.Round(b*lightenFactor), 255)),
+	}
+
+	itemColor := "#" + hex.EncodeToString(itemBytes)
+	scopeColor := "#" + hex.EncodeToString(scopeBytes)
 
 	s := fmt.Sprintf("<span class='ui label scope-parent' title='%s'>"+
 		"<div class='ui label scope-left' style='color: %s !important; background-color: %s !important'>%s</div>"+
diff --git a/modules/util/color.go b/modules/util/color.go
new file mode 100644
index 0000000000..240b045c28
--- /dev/null
+++ b/modules/util/color.go
@@ -0,0 +1,65 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+package util
+
+import (
+	"fmt"
+	"math"
+	"strconv"
+	"strings"
+)
+
+// Check similar implementation in web_src/js/utils/color.js and keep synchronization
+
+// Return R, G, B values defined in reletive luminance
+func getLuminanceRGB(channel float64) float64 {
+	sRGB := channel / 255
+	if sRGB <= 0.03928 {
+		return sRGB / 12.92
+	}
+	return math.Pow((sRGB+0.055)/1.055, 2.4)
+}
+
+// Get color as RGB values in 0..255 range from the hex color string (with or without #)
+func HexToRBGColor(colorString string) (float64, float64, float64) {
+	hexString := colorString
+	if strings.HasPrefix(colorString, "#") {
+		hexString = colorString[1:]
+	}
+	// only support transfer of rgb, rgba, rrggbb and rrggbbaa
+	// if not in these formats, use default values 0, 0, 0
+	if len(hexString) != 3 && len(hexString) != 4 && len(hexString) != 6 && len(hexString) != 8 {
+		return 0, 0, 0
+	}
+	if len(hexString) == 3 || len(hexString) == 4 {
+		hexString = fmt.Sprintf("%c%c%c%c%c%c", hexString[0], hexString[0], hexString[1], hexString[1], hexString[2], hexString[2])
+	}
+	if len(hexString) == 8 {
+		hexString = hexString[0:6]
+	}
+	color, err := strconv.ParseUint(hexString, 16, 64)
+	if err != nil {
+		return 0, 0, 0
+	}
+	r := float64(uint8(0xFF & (uint32(color) >> 16)))
+	g := float64(uint8(0xFF & (uint32(color) >> 8)))
+	b := float64(uint8(0xFF & uint32(color)))
+	return r, g, b
+}
+
+// return luminance given RGB channels
+// Reference from: https://www.w3.org/WAI/GL/wiki/Relative_luminance
+func GetLuminance(r, g, b float64) float64 {
+	R := getLuminanceRGB(r)
+	G := getLuminanceRGB(g)
+	B := getLuminanceRGB(b)
+	luminance := 0.2126*R + 0.7152*G + 0.0722*B
+	return luminance
+}
+
+// Reference from: https://firsching.ch/github_labels.html
+// In the future WCAG 3 APCA may be a better solution.
+// Check if text should use light color based on RGB of background
+func UseLightTextOnBackground(r, g, b float64) bool {
+	return GetLuminance(r, g, b) < 0.453
+}
diff --git a/modules/util/color_test.go b/modules/util/color_test.go
new file mode 100644
index 0000000000..d96ac36730
--- /dev/null
+++ b/modules/util/color_test.go
@@ -0,0 +1,65 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+package util
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func Test_HexToRBGColor(t *testing.T) {
+	cases := []struct {
+		colorString string
+		expectedR   float64
+		expectedG   float64
+		expectedB   float64
+	}{
+		{"2b8685", 43, 134, 133},
+		{"1e1", 17, 238, 17},
+		{"#1e1", 17, 238, 17},
+		{"1e16", 17, 238, 17},
+		{"3bb6b3", 59, 182, 179},
+		{"#3bb6b399", 59, 182, 179},
+		{"#0", 0, 0, 0},
+		{"#00000", 0, 0, 0},
+		{"#1234567", 0, 0, 0},
+	}
+	for n, c := range cases {
+		r, g, b := HexToRBGColor(c.colorString)
+		assert.Equal(t, c.expectedR, r, "case %d: error R should match: expected %f, but get %f", n, c.expectedR, r)
+		assert.Equal(t, c.expectedG, g, "case %d: error G should match: expected %f, but get %f", n, c.expectedG, g)
+		assert.Equal(t, c.expectedB, b, "case %d: error B should match: expected %f, but get %f", n, c.expectedB, b)
+	}
+}
+
+func Test_UseLightTextOnBackground(t *testing.T) {
+	cases := []struct {
+		r        float64
+		g        float64
+		b        float64
+		expected bool
+	}{
+		{215, 58, 74, true},
+		{0, 117, 202, true},
+		{207, 211, 215, false},
+		{162, 238, 239, false},
+		{112, 87, 255, true},
+		{0, 134, 114, true},
+		{228, 230, 105, false},
+		{216, 118, 227, true},
+		{255, 255, 255, false},
+		{43, 134, 133, true},
+		{43, 135, 134, true},
+		{44, 135, 134, true},
+		{59, 182, 179, true},
+		{124, 114, 104, true},
+		{126, 113, 108, true},
+		{129, 112, 109, true},
+		{128, 112, 112, true},
+	}
+	for n, c := range cases {
+		result := UseLightTextOnBackground(c.r, c.g, c.b)
+		assert.Equal(t, c.expected, result, "case %d: error should match", n)
+	}
+}