Color Contrast

I know that I have referenced the usability study on several times in past entries already, but don't expect that to change now. It is a wealth of useful information.

The usability study makes 189 recommendations and ranks each on a scale of one (1) to five (5) on both "Relative Importance" and "Strength of Evidence". Of these, four (4) rank highest in both factors. I have already referenced one of these "Use an Iterative Design Process" (pdf) in a previous entry ("In Defense of FLiP").

Another of those four highest recommendations is "Use Black Text on Plain, High-Contrast Backgrounds" (pdf). Although the recommendation specifically states black text, the text of the recommendation ends with this sentence "In general, the greater the contrast between the text and background, the easier the text is to read.".

Fortunately, you can use Colour Contrast Check to check for both brightness difference and colour difference and check for compliance to WCAG (Web Content Accessibility Guidelines) Checkpoint 2.2.

Note, of course, that the degree of contrast isn't everything. According to, dark text on light background is easier to read. "When compared to reading light text on a dark background, people read black text on a white background up to thirtytwo percent faster."

To read more about color, check out "Color, Contrast & Dimension in News Design".

Here are some other tools and resources:

A downloadable tool, Colour Contrast Analyser (British spellings) allows you to enter the colors that you are using and it will quantify the contrast between the colors and compares it to a value of "acceptable contrast". If you would rather just see the results of different color choices (or you don't want to download software), you can try the Palettizer css color contrast picker.

Good luck!

Eyetrack and Usability Notes

I recently discovered a new study on web site usage. Eyetrack III is a study of the eye movements of 46 people on fictional and real news web sites. They published a summary of their findings as well as an FAQ about Eyetrack. For ongoing reading on the topic, check out the Eyetools Blog.

While on the topic of eye tracking, I read one of the recent enties on the Eyetools blog and thought it was worthy of mention. The Washington Post web site just underwent a redesign. Eyetools created a Heatmap of the page from 19 visitors. The Heatmap reveals that the bottom of the page is getting very little attention.

What is interesting about this is that evidence demonstrates that this is NOT a below-the-fold problem. The Heatmap shows no dramatic drop in attention for areas below the fold.

So what is the problem? Eyetools says "ineffective line-height spacing and lack of white-space reduce reading". I think they are right, but their Heatmap shows a dramatic drop. I decided to go out to myself. I scrolled down to around the end of the area where people seemed to be looking and here is what I saw:

Looks like the bottom of a web page doesn't it? It isn't. The page continues, but no one is looking. This seems to coordinate with the "Avoid Scroll Stoppers" (pdf) guideline on, which gave a "Strength of Evidence" of 4/5 and a "Relative Importance" of 2/5.

This certainly seems like something to watch out for in your designs!

In Defense of FLiP

In a previous blog entry, I criticized the Fusebox framework for some of its slight imperfections. So this may seem like a slight reversal. I still maintain that while Fusebox is a great framework, it isn't the choice for me. FLiP (Fusebox Lifecycle Process - the methodology associated with Fusebox and Mach-ii), on the other hand, is another matter.


Good 404 Error Pages

The Dreaded 404 Page

No matter how careful you are, sometime someone is going to try to pull up a page on your web site that doesn't exist. You might move a page or they might mis-type a URL or follow a link of someone else that mis-typed a URL.

When it happens, unless you take precautions, the user gets your web server's default 404 page. This is generally a plain white page that tells them in geek-speak that the page doesn't exist. In observing casual web users, the most common reaction that I have seen to this error is for the user to decide that the site no longer exists (ouch!).


Unobtrusive Javascript

I was reading through Bill Rawlinson's blog and in two different entries he mentions Unobtrusive Javascript. I had to check it out.

After reading about it, I have to say that I am thoroughly amazed. These are thoughts that I had been having about JavaScript in a general sense, but taken to a level that I hadn't yet reached (or, let's be honest, gotten very close to). From now on, my goal in writing JavaScript will be to meet those guidelines.

In short, Unobtrusive JavaScript is an an attempt to separate functionality from HTML so that functionality doesn't polute the mark-up. This is for essentially the same purpose as separating styling from HTML. It should also make sure not to hinder a page from working when JavaScript isn't available or get in the way of accessibility.

Read about Unobtrusive Javascript.

BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.