selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #329 from Monadical-SAS/better-speaker-name-colors

Browse Source 
Speaker Names Have Better Contrast (but less variety)
This commit is contained in:
Andreas Bonini
2023-12-15 16:57:29 +07:00
committed by GitHub
parent 6048339c26 5dad782042
commit 69443603fb
1 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
www/app/lib/utils.ts
View File

@@ -98,28 +98,33 @@ export function murmurhash3_32_gc(key: string, seed: number = 0) {
export const generateHighContrastColor = ( export const generateHighContrastColor = (
name: string, name: string,
backgroundColor: [number, number, number] | null = null, backgroundColor: [number, number, number],
) => { ) => {
const hash = murmurhash3_32_gc(name); let loopNumber = 0;
let red = (hash & 0xff0000) >> 16; let minAcceptedContrast = 3.5;
let green = (hash & 0x00ff00) >> 8; while (true && /* Just as a safeguard */ loopNumber < 100) {
let blue = hash & 0x0000ff; ++loopNumber;
const getCssColor = (red: number, green: number, blue: number) => if (loopNumber > 5) minAcceptedContrast -= 0.5;
`rgb(${red}, ${green}, ${blue})`;
if (!backgroundColor) return getCssColor(red, green, blue); const hash = murmurhash3_32_gc(name + loopNumber);
let red = (hash & 0xff0000) >> 16;
let green = (hash & 0x00ff00) >> 8;
let blue = hash & 0x0000ff;
const contrast = getContrastRatio([red, green, blue], backgroundColor); let contrast = getContrastRatio([red, green, blue], backgroundColor);
// Adjust the color to achieve better contrast if necessary (WCAG recommends at least 4.5:1 for text) if (contrast > minAcceptedContrast) return `rgb(${red}, ${green}, ${blue})`;
if (contrast < 4.5) {
// Try to invert the color to increase contrat - this works best the more away the color is from gray
red = Math.abs(255 - red); red = Math.abs(255 - red);
green = Math.abs(255 - green); green = Math.abs(255 - green);
blue = Math.abs(255 - blue); blue = Math.abs(255 - blue);
}
return getCssColor(red, green, blue); contrast = getContrastRatio([red, green, blue], backgroundColor);
if (contrast > minAcceptedContrast) return `rgb(${red}, ${green}, ${blue})`;
}
}; };
export function extractDomain(url) { export function extractDomain(url) {