Gitea-John71/Gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-08-07 13:12:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance(ui): improve luminance calculations (#38682)

Browse Source
This commit is contained in:
silverwind
2026-08-06 08:41:40 +02:00
committed by GitHub
parent cc0d348d84
commit 92ac357b1a
5 changed files with 45 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/js/utils/color.test.ts
+4 -2
View File
@@ -8,11 +8,13 @@ test('contrastColor', () => {
expect(contrastColor('#7057ff')).toBe('#fff');
expect(contrastColor('#008672')).toBe('#fff');
expect(contrastColor('#e4e669')).toBe('#000');
expect(contrastColor('#d876e3')).toBe('#000');
expect(contrastColor('#d876e3')).toBe('#fff');
expect(contrastColor('#ffffff')).toBe('#000');
expect(contrastColor('#2b8684')).toBe('#fff');
expect(contrastColor('#2b8786')).toBe('#fff');
expect(contrastColor('#2c8786')).toBe('#000');
expect(contrastColor('#2c8786')).toBe('#fff');
expect(contrastColor('#2bb3b2')).toBe('#fff');
expect(contrastColor('#2bb4b3')).toBe('#000');
expect(contrastColor('#3bb6b3')).toBe('#000');
expect(contrastColor('#7c7268')).toBe('#fff');
expect(contrastColor('#7e716c')).toBe('#fff');
web_src/js/utils/color.ts
+9 -5
View File
@@ -1,20 +1,24 @@
import {colord} from 'colord';
import type {AnyColor} from 'colord';
/** Returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance */
/** Undoes the sRGB transfer function, channel is in 0..255 range. */
function linearizeChannel(channel: number): number {
const srgb = channel / 255;
return srgb <= 0.04045 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;
}
/** Returns relative luminance for a SRGB color - https://www.w3.org/TR/WCAG20/#relativeluminancedef */
// Keep this in sync with modules/util/color.go
function getRelativeLuminance(color: AnyColor): number {
const {r, g, b} = colord(color).toRgb();
return (0.2126729 * r + 0.7151522 * g + 0.072175 * b) / 255;
return 0.2126 * linearizeChannel(r) + 0.7152 * linearizeChannel(g) + 0.0722 * linearizeChannel(b);
}
function useLightText(backgroundColor: AnyColor): boolean {
return getRelativeLuminance(backgroundColor) < 0.453;
return getRelativeLuminance(backgroundColor) < 0.36; // matches APCA better than WCAG's own 0.179
}
/** Given a background color, returns a black or white foreground color with the highest contrast ratio. */
// In the future, the APCA contrast function, or CSS `contrast-color` will be better.
// https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42
export function contrastColor(backgroundColor: AnyColor): string {
return useLightText(backgroundColor) ? '#fff' : '#000';
}