Guy Mc Paul - Daily Web Dose © 2006 - 2007 - http://dailywebdose/blogspot.com
According to WCAG 1.0 Checkpoint 2.2 you must
ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
Moreover according to W3C Techniques For Accessibility Evaluation And Repair Tools
Ideally, images and multimedia object should also be tested for color visibility but algorithms are beyond the scope of this specification.
Color visibility can be determined according to the following algorithm:
Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.
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 to YIQ 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))
The range for color brightness difference is 125. The range for color difference is 500.
Finally according to WCAG 2.0 Guidelines 1.4.3
Text or diagrams, and their background, have a luminosity contrast ratio of at least 10:1.
Now following these guidelines seems very hard, but fortunately there are some tools that can be very handy when this problem must be solved. Follow these easy steps (click on images to enlarge).
1 - COLOUR CONTRAST
Colour Contrast Check is a very useful web based application that allows to specify a foreground and a background colour and determine if they provide enough of a contrast. First of all go to Colour Contrast Check web page.
You will have to choose Foreground colour by using either the HEX #code (if you are testing a colour you already chose) or simply using the combination of the three Red-Green-Blue indicators to reach the colour you wish to proof.
Now you will have to do the same to choose Background colour; again you can use either the HEX #code or simply play with the combination of the three Red-Green-Blue indicators.
While you set these two boxes the third box on the right will display automatically and in real time will indicate:
- YES! - If the colours you are choosing pass the test if both the colour difference and the brightness difference exceed their threshold.
- Sort of! - If only one of the two values exceed their threshold.
- NO! When both colours will fail to pass in case if neither value exceeds its threshold
2 - GREYSCALE CONTRAST
It is time now to check your contrast on a greyscale basis. Again a web tool will help you to visualise your web site in greyscale and verify its readability. Access to Greybit.com and simply write in the address bar your site's URL, press the "Make it Grey" button, wait a few seconds and you will be able to see your web page in black and white and envisage if any adjustment is required.
Naturally you should carry out these two tests especially in case you are planning some web site/blog building and/or renovation. Good luck!
Bookmark this article:
Email this article