Love the web

We recently designed and developed a website for the New Zealand Rehabilitation Association, the website is essentially a blog site. Its purpose is to advocate rehabilitation, debate the issues and connect the people involved in these areas.

From an early stage the client made it clear that a percentage of users would have a variety of impairments and usability was high on the list of priorities. The usual considerations were given when designing this site - and the user was a main focus for us.

Our client worked in conjunction with a company who offer a variety of services, one of them being accessibility assessments.

The assessment brought up a couple of issues that were easily resolved; one issue that needed to be addressed and also sparked my interest was the feedback on colour contrast . The gist of this feedback was that some areas of the site were under the required colour contrast ratio.

The guidelines

Foreground and background colour combinations must adhere to Guideline 2.2 of the Web Content Accessibility Guidelines 1.0, they must:

• Have sufficient contrast for someone with colour viewing shortfalls
• Have sufficient contrast for someone using a black & white screen
• Adhere to the colour brightness difference range, outlined in this www.w3.org/tr/aert#color-contrast colour contrast algorithm

Checking colour contrast

• There are several online contrast checkers that can analyse your background and foreground colour combinations for you. One that I used was juicystudio.com/services/colourcontrast.php. Pretty simple stuff, just enter your colour values and it will tell you if you have passed or not.
• There is a downloadable colour contrast analyser www.paciellogroup.com/resources/contrast-analyser.html#macdownload available for mac and pc.
• There are also lists of web safe colours that you can use on various background colours.

Designing following the guidelines

Off the top of my head I can think of 50 beautifully designed sites that do not adhere to the colour contrast guidelines. Does this make them bad sites? To some people the answer would be yes, but I think each case needs to be judged on its own merits.

I think how you tackle this issue comes down to a project by project basis. At the outset of a job a decision needs to be made about how far you want the standards to go.

In my mind there are 3 major directions to take.

• The site requires a special high contrast design. This approach could be taken when the majority of the users are visually impaired.
• The site requires 2 style sheets a standard design and a high contrast design. (eg. www.newzealand.govt.nz). This approach could be taken when the majority of the users suffer from no visual impairments but a percentage of users do.
• The site requires one design, the designer exercises responsibilty and ensures the majority of the users can view the site, but there is no particular focus on a high contrast design.

I think the second option is the most desirable. I say this for a couple reasons; firstly because I am concerned about contrast ratio guidelines. The guidelines seem to focus on the contrast of specific areas of the site (the link and its background colour, the body and its background colour) the tests do not look at how the contrast is effected site wide. When every element is designed at maximum contrast, the experience of users without any visual impairment will suffer. 

Secondly I feel that by offering 2 style sheets, you can give the majority of your users the richest experience you can offer. The designer gets to have full creative freedom and can create the most visually stimulating and usable website for people without visual impairments. Then you provide a high contrast alternative design which caters to all the standards and everyone's needs.