Recommended Web Tools Archives

Testing the Color Contrast of a webpage

In order to promote a greater level of usability for your readers (both disabled and non-disabled) it is important to check the color contrast of your webpage. I have written elsewhere about the value of a “readable” website, so suffice it to say that testing color contrast is a simple way to find out the readability of your website pages.

Think about the times you have come across websites with a dark background and some kind of pastel font color. Or worse, a light background and a pastel font color. Why make a reader work to read your site? It should be easy on the eyes. I personally recommend that your content text should be black on white. You can have whatever colors you want around the content, but make sure the content can be read.

So, using a robust color contrast test, you can determine the readability of your site.

Accesskeys offers the following functionality:

• tests the color contrast and color brightness between the foreground and background of all text elements
• ensures enough color contrast for readers with visual disabilities (such as those with low vision or color blindness
• automatically finds the values of all color combinations and tests them for you
• finds color combinations by evaluating internal and external CSS files
• two modes of report presentation: 1) complete line by line report of the HTML document or 2) reporting only errors and warnings
• Warning are reported when either color contrast or color difference fail
• Errors are reported when both color contrast or color difference fail
• Works only on websites that contain true text (no text on images, flash, etc.)
• Mouse over text effects are ignored

Why work towards a readable website?

1) Readable text stands out AND is recognizable.

2) A website that can be read can be read again, and again.

3) Readable text connects to your reader.

4) Readable text lowers barriers to other content on your site.

5) A readable website puts your readers at immediate ease.

Five Ways to Improve the Readability of your website

While we are in the video age, text still reigns supreme on websites. Since that is the case, it is important that your visitors be able to actually read it!

Consider these five ways to improve the readability of your website:

1) Use a black colored font on a white background. Your main content should at least be in a content box with a white background, similar to how this website works. You can use other colors around the content box. You can do ALL sorts of things outside the content box, BUT make sure you use black on white for the main article. Use pure black, #00000. Do not use some almost black color that is actually a form of grey or taupe. Black on white reads the best. It always has and always will.

2) Choose a readable, yet interesting font. Arial and Helvetica are the ole standbys. Very readable. Not very interesting. Try Verdana inside. Other good fonts to consider: Georgia or Tahoma.

3) Line spacing (or line height). This is the distance between the line below and the line above. Make sure it is at least 1.5. Make it too small and the words run tight, too large and a readers eyeballs fall all over the page.

4) Keep advertising out of the main content of the article. Put your Adsense at the top or bottom. Forget using word-sense technologies that highlight key advertised words. Annoying and distracting. I know Internet marketers will disagree here. Here is my deal: Good content ultimately sells. If readers read it (and CAN read it without hindrance) and find it worthwhile, they will be back. I am a believer in letting your content sell itself. Readers will come back and reward you in other ways. Don’t try to force them to click something when they are in the middle of your content.

5) Remove all other annoyances to reading. This includes fly-ins, Flash, etc. The goal here is to ENABLE people to read, to create VALUE, so people come back for more. You want them to come back right? Do not chase them away.