George V. Reilly

Contrasting Colors for Text and Background

About three weeks ago, I answered a question on Stack­Over­flow about generating the most readable color of text on a colored background.

I suggested flipping the top bit of each component, (r ^ 0x80, g ^ 0x80, b ^ 0x80). This has the same effect as adding 128 if the component is less than 128, and sub­tract­ing 128 otherwise.

Another way to think about it is to imagine the 256x256x256 color cube. Inside that cube, erect another cube half as wide. One corner is at your original color and the diagonally opposite corner is the one computed above.

The questioner liked my answer the best, but I decided to experiment further. I wrote some JavaScript to compute that color. As you can see in the table of 549 colors below, it works well most of the time, but it’s not perfect.

Someone else suggested an earlier SO question on good-looking font colors. Looking at that thread, I decided to try inverting the HSL value to (h + 180, s, l + (l < 0.5 ? 0.5 : -0.5)). That works well too. Generally, it yields different colors than my first approach. It looks like one of the two always contrasts well.

I found that the most effective approach was to compute the gray-level intensity of the original color, (0.30*r + 0.59*g + 0.11*b). If it was dark, use white; otherwise, black.

Really, though, unless you have a re­quire­ment to work with arbitrary colors, you should pick your color scheme carefully. I found a really nice site this afternoon, Col­orSchemeDesign­

Here’s the source of my colortable.

blog comments powered by Disqus
Allergies » « Iowa Gay Marriage Ruling