text-shadow property, you can achieve an outline effect on your text. A black outline should make white text standout against a white background, whereas it is barely noticable against a black background. (The class name could be chosen "better" so that html does not dictate the appearance, but that is slightly beyond the point of this answer).
text-shadow: 1px 0px #000,
-1px 0px #000,
0px 1px #000,
0px -1px #000;
Another option is to use
mix-blend-mode:difference;. This causes the text to appear in the negative color of the background. This method has a few issues though. The negative of grey is grey, making it hard to read (same applies for some other colors). Not to mention the support for this method is slightly underwhelming.
Lastly you can look at the article "The Art Of The SVG Filter And Why It Is Awesome". They use SVG-filters to create a wide variety of cool effects you simply cannot achieve (yet) using css.