This tool takes all of the references to colour from your web page including your CSS and nicely compares the background colours to the foreground colours. The report that gets tabulated shows very bluntly what instance is acceptable and what instance is not. The system analyses three things: Contrast Ratio, Brightness difference, and Color difference. By clicking on the rows, it also allows the user to find another colour that would replace the current one. Unfortunately, this feature is a little hard to click on.

The site can give the user an idea of what is lacking in terms of colour accessibility, but does not offer a comprehensive understanding of what the guidelines are. Explaining what the categories and the numbers mean might clarify the systems results.

Let me demystify it for you.

Contrast Ratio: Contrast is measured using a formula that gives a ratio ranging from 1:1 (no contrast) to 21:1 (maximum contrast). AA and AAA refers to the level of priority. Level AA are strongly recommended (mininum contrast is 4.5:1) to allow most users accessibility. Level AAA are suggested (mininum contrast is 7:1) to allow some users accessibility.

Algorithm for luminosity contrast ratio in Web Content Accessibility Guidelines 2.0 Glossary.

Brightness difference: Another formula that evaluates the difference between the background brightness, and the foreground brightness. This should be greater than 125.

Color difference: This formula refers to the difference between the background colour and the foreground colour  and should be greater than 500.

Formulas are explained in the document Techniques For Accessibility Evaluation And Repair Tools.

The limitation of these types of applications is that we cannot check the colour balance from images.  This is one of the reasons that it is not recommended to make any text into images. They cannot be viewed by external reading programs.

I found that the reviews were all a little outdated and I didn’t get a definite conclusion from any review. So I finally decided to go ahead and check out an authoring tool myself. I went for the markup editor developed in collaboration with the W3C, Amaya. It’s a WYSIWYG editor/browser. Many distributions are available. I will be looking at the Windows one.

I opened an existing file that I know is made to standard and it came out all distorted. I then created a page from scratch. I must admit that I’m not used to any kind of authoring tool. I have been using Notepad++ for a while. So it was a little strange. At first it took me some time to get used to the application itself, but after a while of playing with it, it was fairly simple to use. I did a trivial page with a menu, an unordered list, a form and an image.
Page done with Amaya

Page done with authoring tool Amaya

Formatting done to some text resulted in inlining style, there were extra open and close paragraphs, inserting the image required to enter an alternative text, and as for the other elements they were pretty intuitive.

It’s clear that you still need to know some basic concepts in web standards to make any web page complaint or accessible. This tool might be good for someone just starting, but I think I’ll just stay with my simple text editor.

Stuff like opacity: .4 -moz-opacity: .4 filter: alpha(opacity=40) for the moment out of the question. We all have to wait patiently until CSS3. Yeah you heard me CSS3. If you did’t know, CSS2 is the current cascading style sheet language recognized by most of your browsers and it’s getting a face lift. Alas, the due date is unknown at this point.

If you want more information on this check out these important websites:
www.css3.info
www.w3.org/Style/CSS/current-work