2026-04-14 16:35 UTC
@firefoxwebdevs@mastodon.social @khamer@me.dm Here's a useful resource for checking color contrast: https://webaim.org/resources/linkcontrastchecker/
In my own code, and I'm ashamed I didn't save links to how I found these values, I calculate contrast-color manually in JS like this (assuming values for the background's r, b, and g of 0-255):
let luminance = r / 1199 + g / 357 + b / 3532; // 0-1
let foreground = luminance > .63 ? "#000" : "#fff";
I also emphasize it more with text shadow, giving a subtly glowing outline around the text:
elem.style.textShadow = "0 0 .3ex " + (luminance > .63 ? "#fff" : "#000");
Replies (2)
-
@firefoxwebdevs@mastodon.social 2026-04-14 16:51
@adamhotep@infosec.exchange @khamer@me.dm that's cool, but just be aware of the cases where WCAG gets it wrong (that page uses WCAG)
-
@Myndex@techhub.social 2026-05-03 21:41
@adamhotep@infosec.exchange @firefoxwebdevs@mastodon.social @khamer@me.dm Here's your answer, the coefficients for sRGB are R: 0.2126 G: 0.7152 B: 0.0722 If you multiple each of them by 255, you get the numbers in your code. However, if you want the real flip point, it's about 0.37, the approximate center of contrast, not 0.63 I have a repo that demonstrates this: https://github.com/Myndex/fancyfontflipping And another that is just a flipper: https://github.com/Myndex/max-contrast