Prose RSS rss feed icon

Subscribe to the Maveco Prose RSS feed.



Accessibility – a simple guide

If you are designing for the web you need to be aware of the Disability Discrimination Act (DDA). This states that web sites be accessible to persons of visual and physical impairment. The following information and links should help

Discrimination in relations to goods, facilities and access to services, is basically the whole point here. If someone cannot access a website properly using a screen reader they have grounds for legal action. There are precedents here, the RNIB are cracking down on this, and several people in the US havesued for discrimination, against, among others, Target, and more.

So how to tread carefully. Contrary to popular thought, it is not all about colour contrast. It is more about code, metadata, semantic web techniques, link language and common sense.

So first off, the I.A.. Any accessibility no-no’s can be spotted right there in the I.A. Links that have the same name but go to different pages, links that reference colour, poorly thought out user journey, all of these can be fixed.

The design needs to take into account the legibility of text on a web page, specifically colour contrast. This is mostly for people who are colourblind. TheW3C uses an algorithm to determine whether the contrast of text is sufficient, giving the following requirements to meet AA compliancy:

‘The visual presentation of text and images of text has a contrast ratio of at least 4.5:1’

Snook have a perfect tool for checking that these guidelines are met. Or you could use Contrast Analyser from The Paciello Group

Colour Brightness Formula
Colour brightness is determined by the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

The difference between the background brightness, and the foreground brightness should be greater than 125.

Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a colour.

Colour Difference Formula
Colour difference is determined by the following formula:

(maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))

The difference between the background colour and the foreground colour should be greater than 500.

So you need to make sure that the text is also large enough – I recommend not going below 12px, unless for displaying metadata, or where a hierarchy using colour cannot be effective, and size needs to convey order.

Will be adding to this article regularly. Hope this info helps

Related External Links

Prose - Similar Posts