Actually compute proper foreground color for labels (#16729)

1 files changed, 22 insertions, 7 deletions

diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index df04f0d8d8..be428b4776 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -24,6 +24,22 @@ import {SvgIcon} from '../svg.js';
 
 const {AppSubUrl} = window.config;
 
+// NOTE: see models/issue_label.go for similar implementation
+const srgbToLinear = (color) => {
+  color /= 255;
+  if (color <= 0.04045) {
+    return color / 12.92;
+  }
+  return ((color + 0.055) / 1.055) ** 2.4;
+};
+const luminance = (colorString) => {
+  const r = srgbToLinear(parseInt(colorString.substring(0, 2), 16));
+  const g = srgbToLinear(parseInt(colorString.substring(2, 4), 16));
+  const b = srgbToLinear(parseInt(colorString.substring(4, 6), 16));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const luminanceThreshold = 0.179;
+
 export default {
   name: 'ContextPopup',
 
@@ -74,14 +90,13 @@ export default {
 
     labels() {
       return this.issue.labels.map((label) => {
-        const red = parseInt(label.color.substring(0, 2), 16);
-        const green = parseInt(label.color.substring(2, 4), 16);
-        const blue = parseInt(label.color.substring(4, 6), 16);
-        let color = '#ffffff';
-        if ((red * 0.299 + green * 0.587 + blue * 0.114) > 125) {
-          color = '#000000';
+        let textColor;
+        if (luminance(label.color) < luminanceThreshold) {
+          textColor = '#ffffff';
+        } else {
+          textColor = '#000000';
         }
-        return {name: label.name, color: `#${label.color}`, textColor: color};
+        return {name: label.name, color: `#${label.color}`, textColor};
       });
     }
   },