For a more future oriented version (as setting a font to black wont work with dark pages), check out the CSS Color Module Level 5 spec for color-contrast(), whi

For a more future oriented version (as setting a font to black wont work with dark pages), check out the CSS Color Module Level 5 spec for color-contrast(), which will automatically choose a color that has a proper contrast ratio: https://www.w3.org/TR/css-color-5/#funcdef-color-contrast https://www.w3.org/TR/css-color-5/#funcdef-color-contrast One caveat is it's currently only supported in Safari technical preview. Another thing worth mentioning is the relative brightness algo used in the repo for the linked plugin is using the WCAG 2 formula for relative luminance. This works pretty well in light mode for non-colored backgrounds, but doesn't incorporate perceived luminosity differences of different hues very well. A better algorithm to use here is the Advanced Perceptual Contrast Algorithm (APCA), which is the one used in the WCAG 3 working spec. It more accurately accounts for hue: https://github.com/Myndex/SAPC-APCA https://github.com/Myndex/SAPC-APCA