From 91f6266b2b7ac582940ca43c2aafb5652c2a37f0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 2 Apr 2024 01:52:38 +0200
Subject: [PATCH] Fix and rewrite contrast color calculation

---
 modules/templates/util_render.go       |  9 ++----
 modules/util/color.go                  | 31 +++++++++-----------
 web_src/js/components/ContextPopup.vue | 18 ++++--------
 web_src/js/utils/color.js              | 16 ++++-------
 web_src/js/utils/color.test.js         | 39 +++++++++++++-------------
 5 files changed, 48 insertions(+), 65 deletions(-)

diff --git a/modules/templates/util_render.go b/modules/templates/util_render.go
index d1c9b082fab00..ef5a7545b1746 100644
--- a/modules/templates/util_render.go
+++ b/modules/templates/util_render.go
@@ -123,16 +123,10 @@ func RenderIssueTitle(ctx context.Context, text string, metas map[string]string)
 func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_model.Label) template.HTML {
 	var (
 		archivedCSSClass string
-		textColor        = "#111"
+		textColor        = util.ContrastColor(label.Color)
 		labelScope       = label.ExclusiveScope()
 	)
 
-	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"
-	}
-
 	description := emoji.ReplaceAliases(template.HTMLEscapeString(label.Description))
 
 	if label.IsArchived() {
@@ -153,6 +147,7 @@ func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_m
 
 	// Make scope and item background colors slightly darker and lighter respectively.
 	// More contrast needed with higher luminance, empirically tweaked.
+	r, g, b := util.HexToRBGColor(label.Color);
 	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.
diff --git a/modules/util/color.go b/modules/util/color.go
index 240b045c287a9..052ab3d380f22 100644
--- a/modules/util/color.go
+++ b/modules/util/color.go
@@ -4,22 +4,12 @@ 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
@@ -50,16 +40,23 @@ func HexToRBGColor(colorString string) (float64, float64, float64) {
 // 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
+	return (0.2126*r + 0.7152*g + 0.0722*b) / 255
 }
 
+// calc( ((132 * 0.2126) + (182 * 0.7152) + (235 * 0.0722)) / 255 )
+// = .68704
+
+// color: hsl(0, 0%, calc(var(--lightness-switch) * 100%)) !important;
+// --lightness-switch: max(0, min(calc((1/(var(--lightness-threshold) - var(--perceived-lightness)))), 1));
+
 // 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
+func ContrastColor(color string) string {
+	r, g, b := HexToRBGColor(color);
+	if GetLuminance(r, g, b) < 0.453 {
+		return "#fff"
+	} else {
+		return "#000"
+	}
 }
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index d87eb1a180ea7..5a932045b1b03 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -1,7 +1,6 @@
 <script>
 import {SvgIcon} from '../svg.js';
-import {useLightTextOnBackground} from '../utils/color.js';
-import tinycolor from 'tinycolor2';
+import {contrastColor} from '../utils/color.js';
 import {GET} from '../modules/fetch.js';
 
 const {appSubUrl, i18n} = window.config;
@@ -59,16 +58,11 @@ export default {
     },
 
     labels() {
-      return this.issue.labels.map((label) => {
-        let textColor;
-        const {r, g, b} = tinycolor(label.color).toRgb();
-        if (useLightTextOnBackground(r, g, b)) {
-          textColor = '#eeeeee';
-        } else {
-          textColor = '#111111';
-        }
-        return {name: label.name, color: `#${label.color}`, textColor};
-      });
+      return this.issue.labels.map((label) => ({
+        name: label.name,
+        color: `#${label.color}`,
+        textColor: contrastColor(label.color),
+      }));
     },
   },
   mounted() {
diff --git a/web_src/js/utils/color.js b/web_src/js/utils/color.js
index 0ba6af49ee6e4..6cb3a028ee28c 100644
--- a/web_src/js/utils/color.js
+++ b/web_src/js/utils/color.js
@@ -1,23 +1,19 @@
+import tinycolor from 'tinycolor2';
+
 // Check similar implementation in modules/util/color.go and keep synchronization
 // Return R, G, B values defined in reletive luminance
-function getLuminanceRGB(channel) {
-  const sRGB = channel / 255;
-  return (sRGB <= 0.03928) ? sRGB / 12.92 : ((sRGB + 0.055) / 1.055) ** 2.4;
-}
 
 // Reference from: https://www.w3.org/WAI/GL/wiki/Relative_luminance
 function getLuminance(r, g, b) {
-  const R = getLuminanceRGB(r);
-  const G = getLuminanceRGB(g);
-  const B = getLuminanceRGB(b);
-  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
 }
 
 // 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
-export function useLightTextOnBackground(r, g, b) {
-  return getLuminance(r, g, b) < 0.453;
+export function contrastColor(color) {
+  const {r, g, b} = tinycolor(color).toRgb();
+  return getLuminance(r, g, b) < 0.453 ? '#fff' : '#000';
 }
 
 function resolveColors(obj) {
diff --git a/web_src/js/utils/color.test.js b/web_src/js/utils/color.test.js
index e129109ef0429..df930d6a1659a 100644
--- a/web_src/js/utils/color.test.js
+++ b/web_src/js/utils/color.test.js
@@ -1,21 +1,22 @@
-import {useLightTextOnBackground} from './color.js';
+import {contrastColor} from './color.js';
 
-test('useLightTextOnBackground', () => {
-  expect(useLightTextOnBackground(215, 58, 74)).toBe(true);
-  expect(useLightTextOnBackground(0, 117, 202)).toBe(true);
-  expect(useLightTextOnBackground(207, 211, 215)).toBe(false);
-  expect(useLightTextOnBackground(162, 238, 239)).toBe(false);
-  expect(useLightTextOnBackground(112, 87, 255)).toBe(true);
-  expect(useLightTextOnBackground(0, 134, 114)).toBe(true);
-  expect(useLightTextOnBackground(228, 230, 105)).toBe(false);
-  expect(useLightTextOnBackground(216, 118, 227)).toBe(true);
-  expect(useLightTextOnBackground(255, 255, 255)).toBe(false);
-  expect(useLightTextOnBackground(43, 134, 133)).toBe(true);
-  expect(useLightTextOnBackground(43, 135, 134)).toBe(true);
-  expect(useLightTextOnBackground(44, 135, 134)).toBe(true);
-  expect(useLightTextOnBackground(59, 182, 179)).toBe(true);
-  expect(useLightTextOnBackground(124, 114, 104)).toBe(true);
-  expect(useLightTextOnBackground(126, 113, 108)).toBe(true);
-  expect(useLightTextOnBackground(129, 112, 109)).toBe(true);
-  expect(useLightTextOnBackground(128, 112, 112)).toBe(true);
+test('contrastColor', () => {
+  expect(contrastColor(215, 58, 74)).toBe(true);
+  expect(contrastColor(0, 117, 202)).toBe(true);
+  expect(contrastColor(207, 211, 215)).toBe(false);
+  expect(contrastColor(162, 238, 239)).toBe(false);
+  expect(contrastColor(112, 87, 255)).toBe(true);
+  expect(contrastColor(0, 134, 114)).toBe(true);
+  expect(contrastColor(228, 230, 105)).toBe(false);
+  // expect(contrastColor(216, 118, 227)).toBe(true);
+  expect(contrastColor(255, 255, 255)).toBe(false);
+  expect(contrastColor(43, 134, 133)).toBe(true);
+  expect(contrastColor(43, 135, 134)).toBe(true);
+  // expect(contrastColor(44, 135, 134)).toBe(true);
+  // expect(contrastColor(59, 182, 179)).toBe(true);
+  expect(contrastColor(124, 114, 104)).toBe(true);
+  expect(contrastColor(126, 113, 108)).toBe(true);
+  expect(contrastColor(129, 112, 109)).toBe(true);
+  expect(contrastColor(128, 112, 112)).toBe(true);
+  expect(contrastColor('#84b6eb')).toBe(true);
 });