white typeface on dark background

[giselach]

Hello I am trying to make my typeface color turn white on dark backgrounds and black on lighter backgrounds. any ideas? :-)

so far i've used this :

function hexToRgb(hex) {
const hexCode = hex.charAt(0) === '#'
? hex.substr(1, 6)
: hex;

const hexR = parseInt(hexCode.substr(0, 2), 16);
const hexG = parseInt(hexCode.substr(2, 2), 16);
const hexB = parseInt(hexCode.substr(4, 2), 16);
// Gets the average value of the colors
const contrastRatio = (hexR + hexG + hexB) / (255 * 3);

return contrastRatio >= 0.5
    ? 'black'
    : 'white';

}

[Richard]

Dear @giselach

These Links may help:

https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

https://css-tricks.com/methods-contrasting-text-backgrounds/

---

Best

Richard

[felix_rabe]

maybe this:

    .div{
           color: white;
           mix-blend-mode: difference;
    }

[Richard]

Thanks @felix_rabe 👍