Contrast issue when the user's color is too dark #1785
Description
Describe the bug
When giving a dark color to the realtime options in BlockNote, the foreground always stays black, which makes it unreadable.
To Reproduce
Set a dark color to a realtime user. Example of the issue:
Here is a code snippet that may help compute whether to display the username in black or white:
/**
* Determine whether the foreground color should be white or black based on a provided background color
* Inspired by: https://stackoverflow.com/a/3943023
*
* @param color - The color to use
*
* @returns `true` if the foreground color should be set to black, `false` if it should be set to white
*/
function blackForegroundFor(rgb: { r: number, g: number, b: number }): boolean {
for (const p of ["r", "g", "b"] as const) {
let c = rgb[p] / 255;
if (c <= 0.04045) {
c /= 12.92;
} else {
c = ((c + 0.055) / 1.055) ** 2.4;
}
rgb[p] = c;
}
const luminance = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b;
return luminance <= 0.179;
}Misc
- Node version: N/A
- Package manager: N/A
- Browser: Firefox 139
- I'm a sponsor and would appreciate if you could look into this sooner than later 💖
