Prototype for a web site for small and medium sized museums. Use of Colour

Use of Colour

Appropriate use of colour is fundamental for accessibility. WCAG 1.0 in guide number 2, states “Do not base choices exclusively on colour” “Make sure graphics tests are visible when seen without colour”. Note two following points:

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.
[ Priority1]

2.2 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.
[ Priority2 for images, Priority3 for text ]

The Italian Guidelines containing the technical requirements, the definitions of the different accessibility levels and the technical methodologies for the testing of Web site accessibility contains various criteria for the use of colour.

The following algorithm- suggested by the W3C - can be used to calculate differences in brightness and colour between text and background:

Difference in brightness
Calculate the brightness of text and background colours using the following formula:

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

where Red, Green and Blue are decimal colour values. The difference between the two brightness values should be greater than 125.
Colour difference

[Max (Red1, Red2) - Min (Red1, Red2)] + [Max (Green1, Green2)- Min (Green1, Green2)] + [Max (Blue1, Blue2) – Min (Blue1, Blue2)]

where Red, Green and Blue are the decimal values of the colours and Max and Min the maximum and minimum values between the two indicated. The colour difference should be greater than 500.

Note that the algorithm is merely a guideline as it takes into account only the RGB (Red, Green, Blue) characteristics, whereas each monitor has its own brightness settings.

You can easily test your pages using the following online tools

Color Contrast Analyser
http://www.juicystudio.com/services/colourcontrast.asp
Color contrast verification tool
http://h10014.www1.hp.com/accessibility/color_tool.html

The most common type of colour blindness is difficulty in distinguishing reds, and the second most common is in distinguishing greens. There are various types of colour blindness:

protanopia (red blindness)
deuteranopia (green blindness)
tritanopia (blue blindness)
achromatopsy (colour blindness)

The Colorblind Web Page Filter <http://colorfilter.wickline.org/> is an online programme for testing pages for accessibility in various types of colour blindness.

Useful tools

Sample table of HTML colours with esadecimal values (italian version)
http://www.asciitable.it/colorihtml.asp
http://www.italysoft.com/utility/converters/colori-sicuri.html#
http://www.web-link.it/html/colori256.htm

	Museo&Web Planning Kit for a Quality Site for Small and Medium Sized Museums
	MINERVA - contacts
vai al contenuto français italiano Museo&Web Site Structure Communication Management Accessibility Usability Interoperability Copyright Useful Resources	You are in: Home - Tutorial - Communication - Use of Colour Use of Colour Appropriate use of colour is fundamental for accessibility. WCAG 1.0 in guide number 2, states “Do not base choices exclusively on colour” “Make sure graphics tests are visible when seen without colour”. Note two following points: 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [ Priority1] 2.2 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. [ Priority2 for images, Priority3 for text ] The Italian Guidelines containing the technical requirements, the definitions of the different accessibility levels and the technical methodologies for the testing of Web site accessibility contains various criteria for the use of colour. The following algorithm- suggested by the W3C - can be used to calculate differences in brightness and colour between text and background: Difference in brightness Calculate the brightness of text and background colours using the following formula: ((Red X 299) + (Green X 587) + (Blue X 114)) / 1000 where Red, Green and Blue are decimal colour values. The difference between the two brightness values should be greater than 125. Colour difference [Max (Red1, Red2) - Min (Red1, Red2)] + [Max (Green1, Green2)- Min (Green1, Green2)] + [Max (Blue1, Blue2) – Min (Blue1, Blue2)] where Red, Green and Blue are the decimal values of the colours and Max and Min the maximum and minimum values between the two indicated. The colour difference should be greater than 500. Note that the algorithm is merely a guideline as it takes into account only the RGB (Red, Green, Blue) characteristics, whereas each monitor has its own brightness settings. You can easily test your pages using the following online tools Color Contrast Analyser http://www.juicystudio.com/services/colourcontrast.asp Color contrast verification tool http://h10014.www1.hp.com/accessibility/color_tool.html The most common type of colour blindness is difficulty in distinguishing reds, and the second most common is in distinguishing greens. There are various types of colour blindness: protanopia (red blindness) deuteranopia (green blindness) tritanopia (blue blindness) achromatopsy (colour blindness) The Colorblind Web Page Filter <http://colorfilter.wickline.org/> is an online programme for testing pages for accessibility in various types of colour blindness. Useful tools Sample table of HTML colours with esadecimal values (italian version) http://www.asciitable.it/colorihtml.asp http://www.italysoft.com/utility/converters/colori-sicuri.html# http://www.web-link.it/html/colori256.htm
MINERVA - contacts torna alla navigazione

Museo&Web

Use of Colour

Useful tools