Menu

 You are in: Home - Communication - Use of color

Use of Color

Appropriate use of color is fundamental for accessibility. WCAG 1.0 in guide number 2, states. Do not base choices exclusively on color. Make sure graphics tests are visible when seen without color. 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 color.

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

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

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

    where Red, Green and Blue are decimal color values. The difference between the two brightness values should be greater than 125.
  • Color 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 colors and Max and Min the maximum and minimum values between the two indicated. The color 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 color blindness is difficulty in distinguishing reds, and the second most common is in distinguishing greens. There are various types of color blindness:

  • protanopia (red blindness)
  • deuteranopia (green blindness)
  • tritanopia (blue blindness)
  • achromatopsy (color blindness)

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

Useful tools

Sample table of HTML colors 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