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 →
Published by Bramus!
Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)
View more posts
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.