Recently I worked on a design for a non-profit organization. They gave me a site they wanted to imitate, so I got to work. They loved my work, except for one problem – they couldn’t read the links on the right menu.

I’d never actually met these people before I got to work, and it turned out they were a bit advanced in their years, and their eyes weren’t what they used to be. Even though I’m nearsighted, I can see pretty well in low contrasts, so I didn’t take this into consideration.

Further complicating this problem is that colors my laptop look different from colors on most other monitors.

I had used a background of #8CCCFA, a light blue color, with #FFFFFF, full white text. This is what it looks like:

This is #FFFFFF on #8CCCFA.

Can you see the text? Yes? Go ahead and turn down the contrast on your monitor. Once you get down to maybe 50% of what you had before, can you still see it? Probably not.

This got me thinking. I’ve seen some pretty bad color choices in the past, some that should just be avoided. For example:

This is #0000FF on #FF0000.

This is #FF0000 on #00FF00.

This is #FFFFFF on #FFEF73.

This is #F53792 on #10BEAC.

Human eyes are used to dark colors on light backgrounds, or vice versa. However, pure white on pure black can get infuriating to read, especially in low light conditions. The point then is to try to find a happy medium – perhaps white on a very dark gray. Try it, you might be surprised:

This is #FFFFFF on #000000.

And this is #FFFFFF on #111111.

It may not look like much now, but let’s say you’re staring at a long article. Would you rather read the one at 100% contrast or the one at 93.3%? Try it out. Take a look at #FFFFFF on #000000 and at #FFFFFF on #111111. Imagine if you were reading that for extended amounts of time. Which one would you pick then? Remember that subtle differences in design can have a large impact.

There’s a site I discovered recently, called Color Scheme Designer, that gives you random color schemes. Best of all, it lets you preview what it would look like in a light design and in a dark design.

Another problem is colorblind visitors. What may look like good contrast to you may be completely unreadable by colorblinds. For example, the color combos shown above can look pretty different between you and a colorblind. Take a look:

Test what your site looks like to different kinds of colorblind people using the Colorblind Web Page Filter.

Pay close attention to colors when you launch a site. If your people can’t read your content, they won’t stay. When you pick a color scheme, make sure all your text is easily readable.