Is there a program to test how well text colors and backgrounds go together?

Factual Questions
1

While I’m not too terrible with colors (besides having trouble telling the difference between light blue and light purple) I do have an issue that I can’t see to get past. I’m really no good a figuring out what text colors look good on backgrounds that are mid-range colors. So this issue comes up when I do webpages, or want to add text to collages etc.

So I was wondering, does there exist a program that would let me take a background I like and preview various color texts? The way I have been doing it - by choosing a color from the HTML codes and typing it into my pages with the HTML editor, then previewing the page, hating it, picking another color from the html codes…takes forever, and I’m hoping there’s some sort of short cut.

I like backgrounds like this one on my new PSP8 Bodyshop tutorial pagehttp://www.geocities.com/simthingd2/psp8tut.html , and I’d like to make it easy to read without spending 2 or 3 hours doing so.

2

Define your intended audience and proceed accordingly. :smiley:

Then again, explore human nature a bit more and you will find the white text on the background you’ve chosen for your web site really isn’t customer friendly. However, it is your web site so …

Check into web safe colors, complimentary web colors, and web color wheels. Some web sites even offer dynamic web color choosers to compare for yourself.

FWIW, people are used to a dark, easy to read typeface color against a lighter ambiguous background. The closer you utilize artistic license from the norm, the smaller your web audience.

Research the top 100 most used web sites. Look at how they use typefaces, color and design. Often the KISS Principle works best for them. Chances are if it works for them, it will work for you. Of course, ymmv.

3

I think I have a rather good interactive color chooser at:
http://www.1728.com/colrchrt.htm

If you want other options, there are 2 others at that website but that webpage is the most popular. It gives you a choice of 216 colors for background and 216 colors for text.

4

Maybe it’d be more useful to consider some principles of how human vision works.

We have red and green light sensing cells in our eyes, and they’re closely spaced. We get most of our visual information from them. We also do our first pass of constructing colors from the ratio between them. If the red content changes between the background and foreground, or if the green content does, we can easily read things. For example red on black, or green on black, or white on purple, or white on blue-green. So changing either the red content or the green content is the way to go.

We can also read using the ratio of red to green, so we can read red letters on a green background, or purple letters on a bluegreen background. This isn’t quite as easy, but we still have the hardware to do it.

As a later evolutionary step we added blue sensing cells, but not so many of them. We use them to create another degree of freedom in color, by detecting the ratio of these blue cells to the sum of the older red and green. But there is not much acuity there. So, if only the blue content changes, it’s very hard to read. For example, blue on black doesn’t work well, nor does yellow on white. You want to avoid schemes where only the blue component changes.

I don’t know how colors are specified on web pages, but a common scheme in computers in general is that they can display red and green and blue levels independantly specified in each pixel. One scheme I’ve seen several places includes 3 hex values ranging from 00 to FF (that’d be 0 to 255 in base 10). They’ll be strung together so 000000 is black, FF0000 is red, FFFF00 is yellow, 000080 is sort of a moderate blue, and so forth. So preferably you’d have text and background colors in which the first character is near either end of the range of 0 to F, or else the third character is.

5

Interesting way of thinking about it, Napier, but it doesn’t really work aesthetically. At least it’s not a dependable way of doing it.

You’re basically pointing out the importance of contrast – whether it be through color or lightness – in determining the legibility of text. That works fine. But in practice, some of the color combinations you suggested don’t work particularly well. Red on black can work ok, but not for long runs of text. Pure red on white, too, is difficult on a computer screen. If you add some black (like, say, 800000 hex), not so bad.

Pure red on pure green, though stimulating different receptors, are among the worst possible text/background combinations on the web. Similarly, even though you posit that blue-on-white not being a good combo, try 000080 (navy blue) on 000000 (white). Looks positively elegant. In fact, there’s a lot of white and blue going on here on the Straight Dope.

So simply analyzing red/green/blue raster levels is not at all an effective way of determining pleasing color combinations. It CAN help, I suppose, but doesn’t seem to be a good way of doing it.

So I looked at that Paint Shop Pro 8 website. No offense, but that background is awful, and there’s not much you can do to improve legibility. Between the lightness of the aqua tone to the relative darkness of the blue tone, no text color is going to provide a good contrast. White, and it runs into the light blue. Black, and it runs into the darker blue. I’m getting dizzy looking at it. Personally, I wouldn’t trust the tutorial content based on the design alone.

Please, choose a less distracting background. Without doing that, ain’t nothing gonna help the legibility of that text. No colors, tones, nothing. There’s too much going on, and too much competing for our visual attention.

6

Here: VisiBone Webmaster's Color Lab is another interactive color chooser. Check out the visibone guy’s poster and mousepad offerings as well :smiley:

7

pulykamell, you’re right. I pointed out how to guarantee contrast, I guess, which is not sufficient to make text readable. In particular, I recall now that spectrally pure red and blue have decent contrast against each other but are very difficult to see boundaries between. I think it’s called “vibration” and might result from chromatic abberation, which the eye isn’t corrected for.

Nicely clarified.

For the record, though, I mentioned blue on black as a problem, and yellow on white, but not blue on white. In blue on white, both the red and the green are changing, and contrast should be excellent.

8

If you really want to make your pages easier to read then you need to change your preferences is backgrounds. That one is fairly busy and so it is distracting to the eye. I know it’s your site and you can have it however you like, but it would solve all your problems.

9

000000 = black. White is FFFFFF.

I do agree that red-on-green looks pukish, though.

10

P.S. I think black would have worked better on that page for the text. There is already white or pale blue in the background and the text gets lost.

11

:smack:

Sorry…Just a brain fart, but good catch.

12

That background might be great for say, a scrapbook page, but it’s really not at all suitable as a text background, no matter WHAT color the text is. Backgrounds should be a solid light color, white is best. NO patterns, I don’t care how cool they are. Text should be dark, black is best. Years ago, when I was a preteen, I read somewhere that the very easiest combination to read was a very pale green background with black text. I’ve never noticed the difference, and in any case theories might have changed since then.

I know that it’s considered very artistic to have a patterned background. However, you have to ask yourself whether you want people to admire the background or admire the text. If you just want people to look at the pretty background, by all means use a patterned background and get as artsy as you want. If you want people to pay attention to your writing, then use very dark text on a very pale unpatterned background. Anything else just gets to be too difficult to read. I, personally, won’t read a page with any sort of patterned background, as there are so many other pages out there which I can read more easily. In the page given as an example, I only read a couple of sentences. It’s just too hard to focus on text that’s on that background.

13

The inverse is okay, too (i.e. light text on a dark background.) I prefer dark backgrounds with light text for monitors and light background with dark text for print. I’ve gotten into heated arguments about this, as some designers take the dark-text on light-background guideline as gospel in all applications. Both are fine.

For those who care, the reason white text on black print is generally avoided for long runs of text is because the ink tends to bleed into the letters, making them appearing smaller and more difficult to read at normal body text point sizes. They work fine for headlines or display text, but as 12-point, they’re clumsy.

With monitors, the opposite is true. White bleeds into the black, making dark text on light backgrounds appear slightly smaller than light text on dark backgrounds. I assume this is also why the original monochrome CRTs were green-on-black: great contrast and legibility, and easier on the eyes than the inverse.

14

That should read “white text on a black background,” of course.

15

Actually a white background is not best. For many people it is very harsh on the eyes. A web page is not the same as reading the same text from a piece of white paper. Even using an ivory background places less strain on the eyes than a white background.

Ideally, the best text color is black. However, a page is not as restrictive with text as it is with the white background. The key is the contrast between the text and the background.

Finally, restrict your fonts to no more than three on a web page. Serif fonts are still commonplace on web site, but not required. Arial is a good choice as an all-around sans serif font, however, verdana was specifically designed for web use.