• Skip to content
• Change text size
• Change contrast

Section navigation

• Resources
  • Adaptive Technology Guide
  • Information & Fact Sheets
  • Eye Conditions
  • Support Groups
  • Tools to Download
    • Colour Contrast Analyser 2.2 for Web Pages
      • Using the CCA
    • Complex Table Toolbar
    • Web Accessibility Toolbar for IE - 2011
    • Accessible YouTube player controls
  • Useful Links
  • Classified ads

Colour Contrast Analyser 2.2 for Web Pages

The Colour Contrast Analyser 2.2 is compatible with the new Web Content Accessibility Guidelines (WCAG 2.0) and is an upgrade of the previous version which was only compatible with WCAG 1.0.

The Colour Contrast Analyser (CCA) was developed by JUn of the Web Accessibility Tools Consortium in collaboration with Vision Australia and Steve Faulkner of The Paciello Group (Europe).

Download Colour Contrast Analyser 2.2 (ZIP, 363KB)

Download, unzip and place the CCA folder where you like. Use the application by activating the ContrastAnalyser2.exe file.

For more information and downloads in languages other than English - see "Download and installation instructions" below.

What is the Colour Contrast Analyser?

It is primarily a tool for checking foreground & background colour combinations to determine if they provide good colour visibility. It also contains functionality to create simulations of certain visual conditions such as colour blindness.

Determining "colour visibility" is based on the Luminosity contrast ratio algorithm, suggested by the World Wide Web Consortium (W3C):

Note:The contrast ratio is now a W3C recommendation (December 2008), to help determine whether or not the contrast between two colours can be read by people with colour blindness or other visual impairments.

Luminosity Contrast Ratio (WCAG 2.0)

Measure the relative luminance of each letter (unless they are all uniform) using the formula:

• L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
  • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
  • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
  • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
  • and RsRGB, GsRGB, and BsRGB are defined as:
  • RsRGB = R8bit/255
  • GsRGB = G8bit/255
  • BsRGB = B8bit/255

The "^" character is the exponentiation operator.

Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.

Top

Colour Brightness Formula (WCAG 1.0)

Colour brightness is determined by the following formula:

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

The difference between the background brightness, and the foreground brightness should be greater than 125.

Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a colour.

Colour Difference Formula (WCAG 1.0)

Colour 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 difference between the background colour and the foreground colour should be greater than 500.

Uses

The Colour Contrast Analyser is useful to help determine, in particular, the legibility of text on a web page and the legibility of image based representations of text.

Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. WCAG 2.0

Guideline 1.4.3: Contrast (Minimum)- WCAG 2 The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement. (Level AA)

Guideline 1.4.6: Contrast (Enhanced) - WCAG 2 The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Assessing conformance with Checkpoint 2.2 of the Web Content Accessibility Guidelines 1.0

Checkpoint 2.2 of the WCAG 1.0 requires that "foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen."

Use the CCA to test colour combinations against the W3C's suggested algorithm for determining "sufficient contrast".

Top

Using the CCA

The documentation is in the process of being written, for the most part, using the CCA is similar to the Luminosity Contrast Ratio Analyser and CCA 1.1 refer to using the CCA 1.1

The main differences are:

• The implementation of the updated contrast ratio algorithm
• The interface now has options to show and hide, the colour sliders, and result details.
• The colour picker sample size can be modified from 1 pixel to 8 x 8 pixels
• For WCAG 2.0 use the "Luminosity" setting (default)
• For WCAG 1.0 use the "Colour brightness/difference" setting

Terms of Use Notice:

The Colour Contrast Analyser 2.2 is Freeware.

By accessing or using the Colour Contrast Analyser 2.2, you acknowledge that you have read, understood and agree to be bound by the Colour Contrast Analyser 2.0 Terms of Use.

You may use the Colour Contrast Analyser 2.2 Software (the "Software") for your personal or commercial use to help you determine the accessibility of your Web content.

THIS SOFTWARE IS BEING PROVIDED "AS IS", WITHOUT ANY EXPRESS OR IMPLIED WARRANTY. IN PARTICULAR, THE WEB ACCESSIBILITY TOOLS CONSORTIUM (WAT-C) DOES NOT MAKE ANY REPRESENTATION ORWARRANTY OF ANY KIND CONCERNING THE RELIABILITY, QUALITY, OR MERCHANTABILITY OF THIS SOFTWARE OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. ADDITIONALLY, WAT-C DOES NOT GUARANTEE THAT USE OF THIS SOFTWAREWILL ENSURE THE ACCESSIBILITY OF YOUR WEB CONTENT OR THAT YOUR WEB CONTENT WILL COMPLY WITH ANY SPECIFIC WEB ACCESSIBILITY STANDARD.

We value all feedback received. Please contact us about any functionality that may not work or other suggestions for improvement by emailing sfaulkner@paciellogroup.com.

This work is licenced under a Creative Commons Licence

Download and Installation Instructions

Please Note:

System Requirements

• Tested on Windows 2000, XP and Vista

Vision Australia Web Accessibility Solutions

Specialists in web accessibility, the Web Accessibility team provide consultancy, training and testing services to help customers make their online services accessible to all.

They work with customers from initial design through to application build and ongoing quality assurance.

Read more about how we can help you reach a wider audience and improve your bottom line with our Web Accessibility Services.

Other accessibility tools

• Web Accessibility Toolbar
• Accessible YouTube Player Controls
• Complex Table Toolbar

This page last updated: 01 August 2011

Top

Footer information

• Help
• Webmaster
• Privacy
• Terms of Use
• © 2012 Vision Australia