Color Contrast

I know that I have referenced the usability study on Usability.gov 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 Usability.gov, 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!