BackgroundCheck (opens in new tab)

Even if they expanded the system such that it were capable of automatically creating spans in the text to adjust from white to black depending upon the background color under specific letters, having the text switch from black to white and back again along with the background would look horrible and would be terrible for reading. But using high contrast outlines works fine on just about anything, which is why that is the go-to for all "meme" photos (Impact white with black outline). While I would suggest avoiding Impact unless you are actually trying to make a "meme" association, this sort of high contrast outlined text is still by far the best way to handle text over images that may themselves be high contrast.

Sadly, true text outline support is inexplicably very bad among browsers, at least as of the last time I checked, though in CSS3-capable browsers you can cheese outlines using textshadow.

What you should most definitely not do, is give each character (or word) its own colour depending on the background. As others pointed out, this would be a pain to implement, wrapping everything in spans etc, but most importantly it also just looks terrible.

Though the very first step is to simply try and see if you can avoid the situation entirely :) [which may be harder if the images are user supplied]

I see three solutions to the problem.

The first is not so elegant. If you have text then you wrap each letter in a span tag and apply the JS to each span. Very ugly, not practical, scalable, etc. but it works. If you've got dynamic text coming from a backend then just forget it. This solution is only viable for static content and even then it's not great.

You could implement this as instructed and then just give the text an outline of the exact opposite color. Chances are your text will not equally overlap both a light and dark background so this wouldn't look too bad at all.

The third solution is to just know your backgrounds very well and choose element placement very carefully so that no matter what background you have your text ends up in an all light or all dark part of it. If I had Medium style app where users get to choose the background image of an element that gets text laid over it this is what I might be okay with doing and accepting that not all the background images will lend themselves well to this technique.

Or... There's a fourth way that I've actually had to consider in one of my projects. Until I saw this post I didn't have the final piece of the puzzle but now I do. I would take the ability to dynamically change the text color based on a background and add to it a translucent background to the text with some padding to make it a blocky thing - kind of like how ios7 handles it in notification center.

The idea is that if you have an element over a mostly light background you give that text itself a light background with about 70% - 80% opacity and the text color dark. This way you're covered even if part of the text is on top of some random dark part of the image background. It's the same idea as using a text outline except its more cross-browser compatible and I personally think it looks better.

But like I said, if you're not in control of the text and/or background there probably isn't going to be a bullet proof solution and you'll have to accept trade offs but if you are in total control then there's no reason you can't mitigate these issues completely.

Edit: Looked closer at the library, if he just added dark-mid or light-mid styles when close, the user can implement the appropriate visual differentiator. Should be good.

I'm not in the graphics design business, but I could only imagine applying that tool manually, in an interactive see-if-it's good environment much like the demonstration.