Friday, April 11, 2008

Blog of a different color

[The masses have spoken. Disregard this post.]

I have been experimenting with a new color scheme on my desktops both at home and at work and now am trying it out on this blog. If you're reading this through a feed you won't notice, but otherwise you're seeing Blogger's Minima Lefty Stretch template (my other blog uses Minima Stretch just to be different - the only difference between the two being whether the sidebar is on the left or the right) with the default background set to a pale yellow (#ffffcc for those of you who know what that means) and the main text set to green (#006600).

I chose this combination not from chance but because there's a dated but still interesting study that shows that this color combination combined with a serif font like the one used in this template provides the best response time for recognizing words. I also find it gentler to read and can read online for much longer periods of time without eye strain. Weirdly enough, long before the study came out I used to use yellow legal pad tablets with green pens. Some of that just being because green is my favorite color, but some was because I found the color combination easy to read.

I may or may not keep this scheme. Let me know what you think.

7 comments:

samwrites2 said...

Jim,
The light yellow does wonders for my eyes. The green typeface hurts, though. And for some reason Arial has always been the easiest on my eyes. Maybe because I used to be saturated with Times New Roman day after day as an editor. I started out trying to use Arial in every blog entry but got tired of doing so much maintenance. There's probably a way you know to set Arial as the default in Wordpress.
By the way, you're on to something here. One of the reasons there are so many fonts, in addition to wanting to make stories stand out and have variety, is the fabled search for the easiest font on the eye.
Good luck.
Thanks
-Sam

ccjjharmon said...

I agree with Sam. The light yellow looks a bit peachy for me, but that's probably my display or something. Green eh... not sure what is better though. What about using something like a color wheel? maybe something a bit darker like 54544A?

I always was pretty bad with fonts and colors though...

Chaotic Hammer said...

I guess the yellow is easier on the eyes because a stark white background seems "loud". I suppose I can see where the yellow is light enough to provide contrast with the text, yet not as blaring bright to the eyeballs.

But I'm not so sure about the green. I'm not sure it's quite enough of a contrast against the yellow. But then again maybe that's the point, and we're just so accustomed to black text on a white background that we don't realize it's better for our eyes.

Does it work to put pure black #000000 text with that yellow as a background?

I use a reader anyway, and will not typically see your page unless I pop over to comment. In which case I'm taken to the black text on white background of the standard Blogger comment page. Oh well.

Aaron said...

I like everything about it except reading it. :-}

The physical structure is fine. I even like how all the colors look, separately and together, when I'm just gazing at it.

However, that green against that yellow is hard on my aging eyes when I try to read it.

The blurb in your masthead is even harder to read, as well as the left column material. A combination of less contrast and smaller type.

The best contrast you have between foreground and background is the main content, and that, in my "view," is much less than optimal.

Skimmed the ref'd study. "Um, yyyyyeeeaahhhh, I'm going to have to go ahead and disagree with that."

My thumbnail understanding has always been that more contrast is better. The most contrast, I think, is black and white. I could imagine that too much contrast could be hard on the eyes. I don't object to colors, but they need to be high contrast.

I would suggest a much lighter background yellow, and a much darker foreground green, if you want those colors. Part of the reason for the lighter background is that the other areas (top, side) won't be at such risk. Otherwise you'll need to specify those areas with better contrast too.

Also, once your links change to "have already clicked on this link" font color, that link just about disappears.

I can imagine a yellow pad and a green pen, and can see it's probably easy to read. I think there's a difference between looking at something like a pad with reflected light, as opposed to looking at a screen that is the light.

If it works for you on your desktop, great. I mostly read your blog on your site, and this is going to make me tired.

Notwithstanding any studies I've read today or in the past, this scheme is hard to read. For me.

Jim said...

Sam,

As a techie, I've spent most of my life enamored of sans serif fonts. However, research does show serif fonts are easier to read.

To all:

Yeah, I can understand how many wouldn't LIKE the color combination of green-on-yellow (I actually do, but then I am weird). However, remember - utilitarian me is playing with what actually makes it the most READABLE. Aesthetics be damned (to a point). That said, at least a few of you have said you find it hard(er) to read. So I may back off.

Aaron,

Re. the links changing color and the text at the top being less readable - huh. I wonder if that's a Windows/IE thing, because I see neither artifact on Linux/Firefox.

Like I said - don't panic, folks. Just playing around with things, and seeing how this would go over from a utilitarian POV. So far, I'd say the reaction is overwhelmingly negative.

Aaron said...

"Re. the links changing color and the text at the top being less readable - huh. I wonder if that's a Windows/IE thing, because I see neither artifact on Linux/Firefox."

No, it's a blogger thing.

I have my browser (Windows/Firefox) set to:
- allow pages to choose their own fonts
- allow pages to choose their own colors

You can see the difference here:
http://justaaron.com/blogColors/

The first two images are screen shots allowing the page to choose its own colors. Note the color of the link in the second paragraph.

The second two images are screen shots after I set my browser to use my own colors. Unfortunately Firefox doesn't let you set fore/back and link colors separately, you either have to use all your colors or all page's colors.

Jim said...

Aaron,

No, I actually think it's a Firefox thing. I, too have Firefox set to:

- allow pages to choose their own fonts
- allow pages to choose their own colors

...and I don't see the color changes you describe. But I'm on Linux. I am also on FF 2.0.0.13, dunno if you're on 1.5.x, 2.x, or the 3.x beta.

Anyway, I'll probably go switch the template back now, just to keep the older curmudgeons in my audience from whining. :o)