Planning Kit for a Quality Site for Small and Medium Sized Museums

wp5 logo
vai al contenuto

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

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

© Minerva Project 2005-02, last revision 2005-04-21, edited by WP5, Committee for the development of a prototype of public cultural websites.
URL: www.minervaeurope/structure/workinggroups/userneeds/prototipo/progproto/accessibilita/usocolore_e.html