RWT Webmaster Tools Blog

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.