Light Text on a Mixed Background

Let's say you wake up one morning and find you're the guy responsible for deciding what colour the subtitle text should be. After overcoming the initial shock of having slept through a major career change, you'd come realize what a difficult problem this is. If you make the text white it'll show up fine on a dark background as you would find in a horror movie or Tim Burton film. On the other hand it will leave the audience puzzled at on a white background like the snowy battle of Hoth. If you give in to the star wars fans and make the text black the Tim Burton fans will grab their pitchforks and head up to your spooky castle during a midnight thunderstorm. Things get even more embarrassing if half the screen is white and half the screen is black. The audience will be able to read half the sentence and no doubt fill in the rest with whatever their dirty minds come up with. This, of course, will lead to many viewer complaints about how smutty modern films have become. What are you to do?

I've run into this problem a couple of times during my programming career. In my case it was adding text overlays to images to show additional image meta data... while fighting the Sith with Jonny Depp! It's actually surprisingly easy to get text to show up nicely on almost any background. All you need to do is have lightly coloured text with a shadow effect.

The simplest way to do this is to simply paint a copy of the text in question one pixel down and one to the right in black. For added readability add another copy one pixel to the right.

Here's some sample code:

g.setColor(Color.BLACK);
g.drawString(TEXT, 10 + 1, 10 + 1); //second shadow
g.drawString(TEXT, 10 + 1, 10); //first shadow

g.setColor(Color.WHITE);
g.drawString(TEXT, 10, 10);

Nice, large, translucent drop shadows can also increase the readability of text. In my case, though, I only want the shadow effect to increase the readability of the text. The simplicity and subtlety of the shadow effect above is a feature.

I've included a real time java demo of just how amazing this effect can be.

Shadowed text demo!

(Requires java. Open the file with the "java web start" application)

Source code is here!

For those without java this is what the incredibly light pink text looks like on a pure white background:

(The application isn't this blurry when you run it :-) )

Google makes use of a subtle and more fancy shadow effects if you select a background for you Google homepage. You can use any photo for the background. In this image I've selected a plain, white background:

(The Google homepage slightly cropped.)