Check out this Pen!
Set the color of the text to the opposite of the background – eg. rgb(255,0,0)
becomes rgb(0,255,255)
– and then use mix-blend-mode: difference;
to make it all work.
Reverse Text Color Based on Background Color Automatically in CSS →
Great stuff!
Different behaviour in browsers though: Chrome and Opera count to 100%, Firefox and Safari don’t, it stays at 0%. But the color change/inversion works in all, differently, but it works.