Contrast Ratio Accessibility  

April 20th, 2011

Contrast ratio in web design is the proportional scale in luminosity of the lightest to the darkest colour of the spectrum on your screen. The desired effect of contrast ratio is subject to the capacity of your display system. The combination of light emissions from environmental factors in a room and light reflection from the screen, all affect the outcome of how website colours are perceived. There is a new method of calculating the contrast ratio between foreground and background colours with web content accessibility guidelines 2.0 (CWAG). Web designers should consider choosing colours that are accessible for colour blind viewers. Read more at: www.456bereastreet.com

The DDA (The Disability Discrimination Act) was replaced by the Equality Act in October 2010 in England, Scotland and Wales. This was passed to protect any user with a disability such as partial sightedness etc. from discrimination and ensure their access to information on websites. Web designers should be aware in advance of the legislation affecting their services, to meet the requirements of those with visual impairments. However, these are guidelines and do not render a website company liable if they lack compliance. The World Wide Web Consortium (W3C) recommends that if you are a UK government website you should be aiming to achieve Double AA.

Zelusi is an example of one of Digital Mosaic’s websites that passes the colour contrast test using the following tools:

 

 

Colour contrast ratio (difference between the extremity of colour usage) and luminosity contrast ratio (level of brightness between foreground and background colours), can all be calculated via pre-defined algorithms. A converter can choose the best foreground colour for the background given, to formulate the correct ratio for the difference in colours used.

Color brightness is determined by the following formula:

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

Note: This algorithm is taken from a formula for converting RGB values toYIQ values. This brightness value gives a perceived brightness for a
color.

Color 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))

More information on these formulas can be found at: http://juicystudio.com/article/luminositycontrastratioalgorithm.php

If these guidelines are a pre-requisite for the client, they should be implemented during the early stages of design to avoid further time consuming changes. Therefore, these colour contrast analysers are worthwhile in influencing the architecture and usability of a website, whilst adhering to regulations of disability discrimination.

Article written by Christina Georgiou