Skip to content →

Month: September 2009

Pretty and accessible design

It is more and more apparent that accessibility can be beautiful. I came across Accessibility in Focus, a website for an accessible web award.

There was 4 finalist, one of them was the Salford City Council. A fairly large website. Its navigation is straightforward even if at first glance the site looks overwhelming. This site is proof that the size of a website is no excuse for accessibility.

The interactive award winner uses Flash. Although Orange Project conforms to the lowest priority level of the W3C WAI standards, I still think that Flash has a long way to go. While considering the site’s probable target audience, the design is a very successful one.

4 Comments

Check My Colours

www.checkmycolours.com is a website for you to easily check if the colours on your website are accessible.

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.

Leave a Comment