Modify luminance calculation and extract related functions into single files

models/issues/label.go

@@ -159,33 +159,6 @@ func (l *Label) BelongsToRepo() bool {
 	return l.RepoID > 0
 }
 
-// Get color as RGB values in 0..255 range
-func (l *Label) ColorRGB() (float64, float64, float64, error) {
-	color, err := strconv.ParseUint(l.Color[1:], 16, 64)
-	if err != nil {
-		return 0, 0, 0, err
-	}
-
-	r := float64(uint8(0xFF & (uint32(color) >> 16)))
-	g := float64(uint8(0xFF & (uint32(color) >> 8)))
-	b := float64(uint8(0xFF & uint32(color)))
-	return r, g, b, nil
-}
-
-// Determine if label text should be light or dark to be readable on background color
-func (l *Label) UseLightTextColor() bool {
-	if strings.HasPrefix(l.Color, "#") {
-		if r, g, b, err := l.ColorRGB(); err == nil {
-			// Perceived brightness from: https://www.w3.org/TR/AERT/#color-contrast
-			// In the future WCAG 3 APCA may be a better solution
-			brightness := (0.299*r + 0.587*g + 0.114*b) / 255
-			return brightness < 0.35
-		}
-	}
-
-	return false
-}
-
 // Return scope substring of label name, or empty string if none exists
 func (l *Label) ExclusiveScope() string {
 	if !l.Exclusive {

models/issues/label_test.go

@@ -22,15 +22,6 @@ func TestLabel_CalOpenIssues(t *testing.T) {
 	assert.EqualValues(t, 2, label.NumOpenIssues)
 }
 
-func TestLabel_TextColor(t *testing.T) {
-	assert.NoError(t, unittest.PrepareTestDatabase())
-	label := unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 1})
-	assert.False(t, label.UseLightTextColor())
-
-	label = unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 2})
-	assert.True(t, label.UseLightTextColor())
-}
-
 func TestLabel_ExclusiveScope(t *testing.T) {
 	assert.NoError(t, unittest.PrepareTestDatabase())
 	label := unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 7})

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, err := util.HexToRBGColor(label.Color)
+	// Determine if label text should be light or dark to be readable on background color
+	if err == nil && util.UseLightTextOnBackground(r, g, b) {
 		textColor = "#eee"
 	}
 
@@ -152,10 +155,10 @@ func RenderLabel(ctx context.Context, label *issues_model.Label) template.HTML {
 
 	itemColor := label.Color
 	scopeColor := label.Color
-	if r, g, b, err := label.ColorRGB(); err == nil {
+	if 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
+		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)

modules/util/color.go

@@ -0,0 +1,55 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+package util
+
+import (
+	"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, error) {
+	var color uint64
+	var err error
+	if strings.HasPrefix(colorString, "#") {
+		color, err = strconv.ParseUint(colorString[1:], 16, 64)
+	} else {
+		color, err = strconv.ParseUint(colorString, 16, 64)
+	}
+	if err != nil {
+		return 0, 0, 0, err
+	}
+	r := float64(uint8(0xFF & (uint32(color) >> 16)))
+	g := float64(uint8(0xFF & (uint32(color) >> 8)))
+	b := float64(uint8(0xFF & uint32(color)))
+	return r, g, b, nil
+}
+
+// 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
+}

modules/util/color_test.go

@@ -0,0 +1,66 @@
+// 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},
+		{"2b8786", 43, 135, 134},
+		{"2c8786", 44, 135, 134},
+		{"3bb6b3", 59, 182, 179},
+		{"7c7268", 124, 114, 104},
+		{"#7e716c", 126, 113, 108},
+		{"#807070", 128, 112, 112},
+		{"#81706d", 129, 112, 109},
+		{"#d73a4a", 215, 58, 74},
+		{"#0075ca", 0, 117, 202},
+	}
+	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)
+	}
+}

web_src/js/components/ContextPopup.vue

@@ -26,7 +26,7 @@
 <script>
 import $ from 'jquery';
 import {SvgIcon} from '../svg.js';
-import {useLightTextOnBackground} from '../utils.js';
+import {useLightTextOnBackground, hexToRGBColor} from '../utils/color.js';
 
 const {appSubUrl, i18n} = window.config;
 
@@ -77,7 +77,8 @@ export default {
     labels() {
       return this.issue.labels.map((label) => {
         let textColor;
-        if (useLightTextOnBackground(label.color)) {
+        const [r, g, b] = hexToRGBColor(label.color);
+        if (useLightTextOnBackground(r, g, b)) {
           textColor = '#eeeeee';
         } else {
           textColor = '#111111';

web_src/js/features/repo-projects.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import {useLightTextOnBackground} from '../utils.js';
+import {useLightTextOnBackground, hexToRGBColor} from '../utils/color.js';
 
 const {csrfToken} = window.config;
 
@@ -190,7 +190,8 @@ export function initRepoProject() {
 }
 
 function setLabelColor(label, color) {
-  if (useLightTextOnBackground(color)) {
+  const [r, g, b] = hexToRGBColor(color);
+  if (useLightTextOnBackground(r, g, b)) {
     label.removeClass('dark-label').addClass('light-label');
   } else {
     label.removeClass('light-label').addClass('dark-label');

web_src/js/utils.js

@@ -135,17 +135,3 @@ export function toAbsoluteUrl(url) {
   return `${window.location.origin}${url}`;
 }
 
-// determine if light or dark text color should be used on a given background color
-// NOTE: see models/issue_label.go for similar implementation
-export function useLightTextOnBackground(backgroundColor) {
-  if (backgroundColor[0] === '#') {
-    backgroundColor = backgroundColor.substring(1);
-  }
-  // Perceived brightness from: https://www.w3.org/TR/AERT/#color-contrast
-  // In the future WCAG 3 APCA may be a better solution.
-  const r = parseInt(backgroundColor.substring(0, 2), 16);
-  const g = parseInt(backgroundColor.substring(2, 4), 16);
-  const b = parseInt(backgroundColor.substring(4, 6), 16);
-  const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return brightness < 0.35;
-}

web_src/js/utils/color.js

@@ -0,0 +1,35 @@
+// 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;
+  const res = (sRGB <= 0.03928) ? sRGB / 12.92 : ((sRGB + 0.055) / 1.055) ** 2.4;
+  return res;
+}
+
+// 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);
+  const luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  return luminance;
+}
+
+// Get color as RGB values in 0..255 range from the hex color string (with or without #)
+export function hexToRGBColor(backgroundColorStr) {
+  let backgroundColor = backgroundColorStr;
+  if (backgroundColorStr[0] === '#') {
+    backgroundColor = backgroundColorStr.substring(1);
+  }
+  const r = parseInt(backgroundColor.substring(0, 2), 16);
+  const g = parseInt(backgroundColor.substring(2, 4), 16);
+  const b = parseInt(backgroundColor.substring(4, 6), 16);
+  return [r, g, b];
+}
+
+// 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;
+}

web_src/js/utils/color.test.js

@@ -0,0 +1,35 @@
+import {test, expect} from 'vitest';
+import {hexToRGBColor, useLightTextOnBackground} from './color.js';
+
+test('hexToRGBColor', () => {
+  expect(hexToRGBColor('2b8685')).toEqual([43, 134, 133]);
+  expect(hexToRGBColor('2b8786')).toEqual([43, 135, 134]);
+  expect(hexToRGBColor('2c8786')).toEqual([44, 135, 134]);
+  expect(hexToRGBColor('3bb6b3')).toEqual([59, 182, 179]);
+  expect(hexToRGBColor('7c7268')).toEqual([124, 114, 104]);
+  expect(hexToRGBColor('#7e716c')).toEqual([126, 113, 108]);
+  expect(hexToRGBColor('#807070')).toEqual([128, 112, 112]);
+  expect(hexToRGBColor('#81706d')).toEqual([129, 112, 109]);
+  expect(hexToRGBColor('#d73a4a')).toEqual([215, 58, 74]);
+  expect(hexToRGBColor('#0075ca')).toEqual([0, 117, 202]);
+});
+
+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);
+});