Skip to content

Commit ea7954f

Browse files
HesterGsilverwindGiteaBot
authoredMay 10, 2023
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>
·
v1.24.0-devv1.20.0-rc0
1 parent 0ca5ade commit ea7954f

File tree

10 files changed

+240
-83
lines changed

10 files changed

+240
-83
lines changed
 

‎models/issues/label.go

-27
Original file line numberDiff line numberDiff line change
@@ -159,33 +159,6 @@ func (l *Label) BelongsToRepo() bool {
159159
return l.RepoID > 0
160160
}
161161

162-
// Get color as RGB values in 0..255 range
163-
func (l *Label) ColorRGB() (float64, float64, float64, error) {
164-
color, err := strconv.ParseUint(l.Color[1:], 16, 64)
165-
if err != nil {
166-
return 0, 0, 0, err
167-
}
168-
169-
r := float64(uint8(0xFF & (uint32(color) >> 16)))
170-
g := float64(uint8(0xFF & (uint32(color) >> 8)))
171-
b := float64(uint8(0xFF & uint32(color)))
172-
return r, g, b, nil
173-
}
174-
175-
// Determine if label text should be light or dark to be readable on background color
176-
func (l *Label) UseLightTextColor() bool {
177-
if strings.HasPrefix(l.Color, "#") {
178-
if r, g, b, err := l.ColorRGB(); err == nil {
179-
// Perceived brightness from: https://www.w3.org/TR/AERT/#color-contrast
180-
// In the future WCAG 3 APCA may be a better solution
181-
brightness := (0.299*r + 0.587*g + 0.114*b) / 255
182-
return brightness < 0.35
183-
}
184-
}
185-
186-
return false
187-
}
188-
189162
// Return scope substring of label name, or empty string if none exists
190163
func (l *Label) ExclusiveScope() string {
191164
if !l.Exclusive {

‎models/issues/label_test.go

-9
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,6 @@ func TestLabel_CalOpenIssues(t *testing.T) {
2222
assert.EqualValues(t, 2, label.NumOpenIssues)
2323
}
2424

25-
func TestLabel_TextColor(t *testing.T) {
26-
assert.NoError(t, unittest.PrepareTestDatabase())
27-
label := unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 1})
28-
assert.False(t, label.UseLightTextColor())
29-
30-
label = unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 2})
31-
assert.True(t, label.UseLightTextColor())
32-
}
33-
3425
func TestLabel_ExclusiveScope(t *testing.T) {
3526
assert.NoError(t, unittest.PrepareTestDatabase())
3627
label := unittest.AssertExistsAndLoadBean(t, &issues_model.Label{ID: 7})

‎modules/templates/util_render.go

+28-29
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import (
2020
"code.gitea.io/gitea/modules/markup"
2121
"code.gitea.io/gitea/modules/markup/markdown"
2222
"code.gitea.io/gitea/modules/setting"
23+
"code.gitea.io/gitea/modules/util"
2324
)
2425

2526
// 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 {
133134
labelScope := label.ExclusiveScope()
134135

135136
textColor := "#111"
136-
if label.UseLightTextColor() {
137+
r, g, b := util.HexToRBGColor(label.Color)
138+
// Determine if label text should be light or dark to be readable on background color
139+
if util.UseLightTextOnBackground(r, g, b) {
137140
textColor = "#eee"
138141
}
139142

@@ -150,34 +153,30 @@ func RenderLabel(ctx context.Context, label *issues_model.Label) template.HTML {
150153
scopeText := RenderEmoji(ctx, labelScope)
151154
itemText := RenderEmoji(ctx, label.Name[len(labelScope)+1:])
152155

153-
itemColor := label.Color
154-
scopeColor := label.Color
155-
if r, g, b, err := label.ColorRGB(); err == nil {
156-
// Make scope and item background colors slightly darker and lighter respectively.
157-
// More contrast needed with higher luminance, empirically tweaked.
158-
luminance := (0.299*r + 0.587*g + 0.114*b) / 255
159-
contrast := 0.01 + luminance*0.03
160-
// Ensure we add the same amount of contrast also near 0 and 1.
161-
darken := contrast + math.Max(luminance+contrast-1.0, 0.0)
162-
lighten := contrast + math.Max(contrast-luminance, 0.0)
163-
// Compute factor to keep RGB values proportional.
164-
darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0)
165-
lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0)
166-
167-
scopeBytes := []byte{
168-
uint8(math.Min(math.Round(r*darkenFactor), 255)),
169-
uint8(math.Min(math.Round(g*darkenFactor), 255)),
170-
uint8(math.Min(math.Round(b*darkenFactor), 255)),
171-
}
172-
itemBytes := []byte{
173-
uint8(math.Min(math.Round(r*lightenFactor), 255)),
174-
uint8(math.Min(math.Round(g*lightenFactor), 255)),
175-
uint8(math.Min(math.Round(b*lightenFactor), 255)),
176-
}
177-
178-
itemColor = "#" + hex.EncodeToString(itemBytes)
179-
scopeColor = "#" + hex.EncodeToString(scopeBytes)
180-
}
156+
// Make scope and item background colors slightly darker and lighter respectively.
157+
// More contrast needed with higher luminance, empirically tweaked.
158+
luminance := util.GetLuminance(r, g, b)
159+
contrast := 0.01 + luminance*0.03
160+
// Ensure we add the same amount of contrast also near 0 and 1.
161+
darken := contrast + math.Max(luminance+contrast-1.0, 0.0)
162+
lighten := contrast + math.Max(contrast-luminance, 0.0)
163+
// Compute factor to keep RGB values proportional.
164+
darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0)
165+
lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0)
166+
167+
scopeBytes := []byte{
168+
uint8(math.Min(math.Round(r*darkenFactor), 255)),
169+
uint8(math.Min(math.Round(g*darkenFactor), 255)),
170+
uint8(math.Min(math.Round(b*darkenFactor), 255)),
171+
}
172+
itemBytes := []byte{
173+
uint8(math.Min(math.Round(r*lightenFactor), 255)),
174+
uint8(math.Min(math.Round(g*lightenFactor), 255)),
175+
uint8(math.Min(math.Round(b*lightenFactor), 255)),
176+
}
177+
178+
itemColor := "#" + hex.EncodeToString(itemBytes)
179+
scopeColor := "#" + hex.EncodeToString(scopeBytes)
181180

182181
s := fmt.Sprintf("<span class='ui label scope-parent' title='%s'>"+
183182
"<div class='ui label scope-left' style='color: %s !important; background-color: %s !important'>%s</div>"+

‎modules/util/color.go

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Copyright 2023 The Gitea Authors. All rights reserved.
2+
// SPDX-License-Identifier: MIT
3+
package util
4+
5+
import (
6+
"fmt"
7+
"math"
8+
"strconv"
9+
"strings"
10+
)
11+
12+
// Check similar implementation in web_src/js/utils/color.js and keep synchronization
13+
14+
// Return R, G, B values defined in reletive luminance
15+
func getLuminanceRGB(channel float64) float64 {
16+
sRGB := channel / 255
17+
if sRGB <= 0.03928 {
18+
return sRGB / 12.92
19+
}
20+
return math.Pow((sRGB+0.055)/1.055, 2.4)
21+
}
22+
23+
// Get color as RGB values in 0..255 range from the hex color string (with or without #)
24+
func HexToRBGColor(colorString string) (float64, float64, float64) {
25+
hexString := colorString
26+
if strings.HasPrefix(colorString, "#") {
27+
hexString = colorString[1:]
28+
}
29+
// only support transfer of rgb, rgba, rrggbb and rrggbbaa
30+
// if not in these formats, use default values 0, 0, 0
31+
if len(hexString) != 3 && len(hexString) != 4 && len(hexString) != 6 && len(hexString) != 8 {
32+
return 0, 0, 0
33+
}
34+
if len(hexString) == 3 || len(hexString) == 4 {
35+
hexString = fmt.Sprintf("%c%c%c%c%c%c", hexString[0], hexString[0], hexString[1], hexString[1], hexString[2], hexString[2])
36+
}
37+
if len(hexString) == 8 {
38+
hexString = hexString[0:6]
39+
}
40+
color, err := strconv.ParseUint(hexString, 16, 64)
41+
if err != nil {
42+
return 0, 0, 0
43+
}
44+
r := float64(uint8(0xFF & (uint32(color) >> 16)))
45+
g := float64(uint8(0xFF & (uint32(color) >> 8)))
46+
b := float64(uint8(0xFF & uint32(color)))
47+
return r, g, b
48+
}
49+
50+
// return luminance given RGB channels
51+
// Reference from: https://www.w3.org/WAI/GL/wiki/Relative_luminance
52+
func GetLuminance(r, g, b float64) float64 {
53+
R := getLuminanceRGB(r)
54+
G := getLuminanceRGB(g)
55+
B := getLuminanceRGB(b)
56+
luminance := 0.2126*R + 0.7152*G + 0.0722*B
57+
return luminance
58+
}
59+
60+
// Reference from: https://firsching.ch/github_labels.html
61+
// In the future WCAG 3 APCA may be a better solution.
62+
// Check if text should use light color based on RGB of background
63+
func UseLightTextOnBackground(r, g, b float64) bool {
64+
return GetLuminance(r, g, b) < 0.453
65+
}

‎modules/util/color_test.go

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Copyright 2023 The Gitea Authors. All rights reserved.
2+
// SPDX-License-Identifier: MIT
3+
package util
4+
5+
import (
6+
"testing"
7+
8+
"github.com/stretchr/testify/assert"
9+
)
10+
11+
func Test_HexToRBGColor(t *testing.T) {
12+
cases := []struct {
13+
colorString string
14+
expectedR float64
15+
expectedG float64
16+
expectedB float64
17+
}{
18+
{"2b8685", 43, 134, 133},
19+
{"1e1", 17, 238, 17},
20+
{"#1e1", 17, 238, 17},
21+
{"1e16", 17, 238, 17},
22+
{"3bb6b3", 59, 182, 179},
23+
{"#3bb6b399", 59, 182, 179},
24+
{"#0", 0, 0, 0},
25+
{"#00000", 0, 0, 0},
26+
{"#1234567", 0, 0, 0},
27+
}
28+
for n, c := range cases {
29+
r, g, b := HexToRBGColor(c.colorString)
30+
assert.Equal(t, c.expectedR, r, "case %d: error R should match: expected %f, but get %f", n, c.expectedR, r)
31+
assert.Equal(t, c.expectedG, g, "case %d: error G should match: expected %f, but get %f", n, c.expectedG, g)
32+
assert.Equal(t, c.expectedB, b, "case %d: error B should match: expected %f, but get %f", n, c.expectedB, b)
33+
}
34+
}
35+
36+
func Test_UseLightTextOnBackground(t *testing.T) {
37+
cases := []struct {
38+
r float64
39+
g float64
40+
b float64
41+
expected bool
42+
}{
43+
{215, 58, 74, true},
44+
{0, 117, 202, true},
45+
{207, 211, 215, false},
46+
{162, 238, 239, false},
47+
{112, 87, 255, true},
48+
{0, 134, 114, true},
49+
{228, 230, 105, false},
50+
{216, 118, 227, true},
51+
{255, 255, 255, false},
52+
{43, 134, 133, true},
53+
{43, 135, 134, true},
54+
{44, 135, 134, true},
55+
{59, 182, 179, true},
56+
{124, 114, 104, true},
57+
{126, 113, 108, true},
58+
{129, 112, 109, true},
59+
{128, 112, 112, true},
60+
}
61+
for n, c := range cases {
62+
result := UseLightTextOnBackground(c.r, c.g, c.b)
63+
assert.Equal(t, c.expected, result, "case %d: error should match", n)
64+
}
65+
}

‎web_src/js/components/ContextPopup.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<script>
2727
import $ from 'jquery';
2828
import {SvgIcon} from '../svg.js';
29-
import {useLightTextOnBackground} from '../utils.js';
29+
import {useLightTextOnBackground, hexToRGBColor} from '../utils/color.js';
3030
3131
const {appSubUrl, i18n} = window.config;
3232
@@ -77,7 +77,8 @@ export default {
7777
labels() {
7878
return this.issue.labels.map((label) => {
7979
let textColor;
80-
if (useLightTextOnBackground(label.color)) {
80+
const [r, g, b] = hexToRGBColor(label.color);
81+
if (useLightTextOnBackground(r, g, b)) {
8182
textColor = '#eeeeee';
8283
} else {
8384
textColor = '#111111';

‎web_src/js/features/repo-projects.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import $ from 'jquery';
2-
import {useLightTextOnBackground} from '../utils.js';
2+
import {useLightTextOnBackground, hexToRGBColor} from '../utils/color.js';
33

44
const {csrfToken} = window.config;
55

@@ -190,7 +190,8 @@ export function initRepoProject() {
190190
}
191191

192192
function setLabelColor(label, color) {
193-
if (useLightTextOnBackground(color)) {
193+
const [r, g, b] = hexToRGBColor(color);
194+
if (useLightTextOnBackground(r, g, b)) {
194195
label.removeClass('dark-label').addClass('light-label');
195196
} else {
196197
label.removeClass('light-label').addClass('dark-label');

‎web_src/js/utils.js

-14
Original file line numberDiff line numberDiff line change
@@ -135,17 +135,3 @@ export function toAbsoluteUrl(url) {
135135
return `${window.location.origin}${url}`;
136136
}
137137

138-
// determine if light or dark text color should be used on a given background color
139-
// NOTE: see models/issue_label.go for similar implementation
140-
export function useLightTextOnBackground(backgroundColor) {
141-
if (backgroundColor[0] === '#') {
142-
backgroundColor = backgroundColor.substring(1);
143-
}
144-
// Perceived brightness from: https://www.w3.org/TR/AERT/#color-contrast
145-
// In the future WCAG 3 APCA may be a better solution.
146-
const r = parseInt(backgroundColor.substring(0, 2), 16);
147-
const g = parseInt(backgroundColor.substring(2, 4), 16);
148-
const b = parseInt(backgroundColor.substring(4, 6), 16);
149-
const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
150-
return brightness < 0.35;
151-
}

‎web_src/js/utils/color.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// Check similar implementation in modules/util/color.go and keep synchronization
2+
// Return R, G, B values defined in reletive luminance
3+
function getLuminanceRGB(channel) {
4+
const sRGB = channel / 255;
5+
return (sRGB <= 0.03928) ? sRGB / 12.92 : ((sRGB + 0.055) / 1.055) ** 2.4;
6+
}
7+
8+
// Reference from: https://www.w3.org/WAI/GL/wiki/Relative_luminance
9+
function getLuminance(r, g, b) {
10+
const R = getLuminanceRGB(r);
11+
const G = getLuminanceRGB(g);
12+
const B = getLuminanceRGB(b);
13+
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
14+
}
15+
16+
// Get color as RGB values in 0..255 range from the hex color string (with or without #)
17+
export function hexToRGBColor(backgroundColorStr) {
18+
let backgroundColor = backgroundColorStr;
19+
if (backgroundColorStr[0] === '#') {
20+
backgroundColor = backgroundColorStr.substring(1);
21+
}
22+
// only support transfer of rgb, rgba, rrggbb and rrggbbaa
23+
// if not in these formats, use default values 0, 0, 0
24+
if (![3, 4, 6, 8].includes(backgroundColor.length)) {
25+
return [0, 0, 0];
26+
}
27+
if ([3, 4].includes(backgroundColor.length)) {
28+
const [r, g, b] = backgroundColor;
29+
backgroundColor = `${r}${r}${g}${g}${b}${b}`;
30+
}
31+
const r = parseInt(backgroundColor.substring(0, 2), 16);
32+
const g = parseInt(backgroundColor.substring(2, 4), 16);
33+
const b = parseInt(backgroundColor.substring(4, 6), 16);
34+
return [r, g, b];
35+
}
36+
37+
// Reference from: https://firsching.ch/github_labels.html
38+
// In the future WCAG 3 APCA may be a better solution.
39+
// Check if text should use light color based on RGB of background
40+
export function useLightTextOnBackground(r, g, b) {
41+
return getLuminance(r, g, b) < 0.453;
42+
}

‎web_src/js/utils/color.test.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {test, expect} from 'vitest';
2+
import {hexToRGBColor, useLightTextOnBackground} from './color.js';
3+
4+
test('hexToRGBColor', () => {
5+
expect(hexToRGBColor('2b8685')).toEqual([43, 134, 133]);
6+
expect(hexToRGBColor('1e1')).toEqual([17, 238, 17]);
7+
expect(hexToRGBColor('#1e1')).toEqual([17, 238, 17]);
8+
expect(hexToRGBColor('1e16')).toEqual([17, 238, 17]);
9+
expect(hexToRGBColor('3bb6b3')).toEqual([59, 182, 179]);
10+
expect(hexToRGBColor('#3bb6b399')).toEqual([59, 182, 179]);
11+
expect(hexToRGBColor('#0')).toEqual([0, 0, 0]);
12+
expect(hexToRGBColor('#00000')).toEqual([0, 0, 0]);
13+
expect(hexToRGBColor('#1234567')).toEqual([0, 0, 0]);
14+
});
15+
16+
test('useLightTextOnBackground', () => {
17+
expect(useLightTextOnBackground(215, 58, 74)).toBe(true);
18+
expect(useLightTextOnBackground(0, 117, 202)).toBe(true);
19+
expect(useLightTextOnBackground(207, 211, 215)).toBe(false);
20+
expect(useLightTextOnBackground(162, 238, 239)).toBe(false);
21+
expect(useLightTextOnBackground(112, 87, 255)).toBe(true);
22+
expect(useLightTextOnBackground(0, 134, 114)).toBe(true);
23+
expect(useLightTextOnBackground(228, 230, 105)).toBe(false);
24+
expect(useLightTextOnBackground(216, 118, 227)).toBe(true);
25+
expect(useLightTextOnBackground(255, 255, 255)).toBe(false);
26+
expect(useLightTextOnBackground(43, 134, 133)).toBe(true);
27+
expect(useLightTextOnBackground(43, 135, 134)).toBe(true);
28+
expect(useLightTextOnBackground(44, 135, 134)).toBe(true);
29+
expect(useLightTextOnBackground(59, 182, 179)).toBe(true);
30+
expect(useLightTextOnBackground(124, 114, 104)).toBe(true);
31+
expect(useLightTextOnBackground(126, 113, 108)).toBe(true);
32+
expect(useLightTextOnBackground(129, 112, 109)).toBe(true);
33+
expect(useLightTextOnBackground(128, 112, 112)).toBe(true);
34+
});

0 commit comments

Comments
 (0)
Please sign in to comment.