Colour Contrast Analyser 1.0

On this page:

Support further development: Make a  using PayPal.

What is the Colour Contrast Analyser?

It is a tool for checking foreground & background colour combinations to determine if they provide good colour visibility. Determining “colour visibility” is based on algorithms suggested by the World Wide Web Consortium (W3C):

“Two colours are considered to provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range.” The range suggested by the W3C is > 125 for colour brightness and > 500 for colour difference.Note: Hewlett Packard (HP) provide an online colour contrast verification tool that uses the W3C algorithms, but sets the Colour Difference range at > 400, which results in a greater range of foreground & background colour combinations being deemed acceptable.

Colour Brightness Formula

colour brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000The 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

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 (CCA) is useful to help determine, in particular, the legibility of text on a web page and the legibility of image based representations of text.

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”.

Using the CCA

The user interface consists of 4 sections

  1. Colour Choice
  2. Results
  3. Colour Blindness Results
  4. Options & Help Menus

1. Colour Choice

The Colour Choice controls are divided into 2 sections (foreground & background) each has 3 ways to choose a colour to test.

  1. Colour pallet(s) accessed via a select box. Use this to help you test and choose suitable colour combinations.The bottom (smaller) colour pallet consists of 10 shades of the currently selected base colour, located top-left, at varying degrees of opacity. The top row emulates opacity over a white background, the bottom over black . The opacity values are 100% opaque, 75%, 50%, 25% and 10% on the top row. The bottom row begins at 85% rather than 100% and continues on as the first.This pallet is useful for testing lighter and darker shades of the base colour, which may improve the visibility of the colour combination being tested.Note: This feature was inspired by the Color Palette Creator.
  2. Input of a colour value (in Hexadecimal format) into a text box. Useful if you have access to the Hex values of colours you want to check.
  3. Sampling of a colour from a web page (or anywhere else on the screen) using a magnifying colour sampler. 
    Useful for quickly sampling, checking and obtaining the hex values of colours. Once the colour sampler button is selected a magnified area will appear around the cursor. The colour of the content under the tip of the cursor will appear in the colour pallet select box
    Once a colour is chosen with the colour sampler (left mouse click or ‘enter’ key) its hex value will appear in the ‘hex value’ text box and the results section will be updated to reflect the brightness and colour differences for the currently selected colour combination.
    Note: For fine control of the cursor use the arrow keys.

2. Results

The Results section is divided into summary results and full results.The ‘Summary Results’ indicate a value for both brightness and colour difference.If both pass the check this is indicated with a tick. If either fail this is indicated with a cross.The ‘Full Results’ displays the values for each of the checks and what the pass/fail criteria are and indicates whether the contrast was found to be sufficient/insufficient.
Note: The text of the summary and full results can be selected and copied.

3. Colour Blindness Results

Selecting the ‘also show contrast results for colour blindness’ check box will display summary results for ‘normal vision’ and 3 types of colour blindness (Protanopia, Deuteranopia, Tritanopia)Note:The method of determining the colour value transformations for the 3 types of colour deficiency is from an algorithm described by Hans Brettel, Francoise Vienot and John Mollon in a paper which appeared in the Journal of the Optical Society of America V14, #10 pp2647.Acknowledgements to the kind people at Vischeck who allowed us access to the source code of their implementation of the Brettel algorithm.

4. Options & Help Menus

Selecting the ‘always on top’ menu item will keep the CCA window on top of all other windows that are open. Selecting ‘font’ menu item opens a dialog box that allows you to modify the font used for the text labels and content of the CCA
Note: selecting some font types or sizes can result in clipping of text content.

Selecting the “help” Menu item  will open the CCA documentation web page in a browser window.Note: you will need to be connected to the internet to access the documentation.

Use via Keyboard

Colour Contrast Analyser Access keys
Function Key(s)
open foreground colour pallet(s) F9
open background colour pallets(s) F10
move through colour pallets arrow keys or the tab key
activate foreground colour sampler F11
activate background colour sampler F12
move colour sampler arrow keys
choose colour in sampler or pallet Enter

Terms of Use Notice:

The Colour Contrast Analyser is Freeware.

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

THIS SOFTWARE IS BEING PROVIDED “AS IS”, WITHOUT ANY EXPRESS OR IMPLIED WARRANTY. IN PARTICULAR, THE NATIONAL INFORMATION AND LIBRARY SERVICE (NILS) DOES NOT MAKE ANY REPRESENTATION OR WARRANTY OF ANY KIND CONCERNING THE RELIABILITY, QUALITY, OR MERCHANTABILITY OF THIS SOFTWARE OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. ADDITIONALLY, NILS DOES NOT GUARANTEE THAT USE OF THIS SOFTWARE WILL ENSURE THE ACCESSIBILITY OF YOUR WEB CONTENT OR THAT YOUR WEB CONTENT WILL COMPLY WITH ANY SPECIFIC WEB ACCESSIBILITY STANDARD.


This work is licensed under a Creative Commons License.

Download and Installation Instructions

Please Note:
The Colour Contrast Analyser does not contain any adware or spyware.

System Requirements

  • Microsoft Windows
    • Tested on Windows 2000 & XP
Download, unzip and place the CCA folder where you like. Use the application by activating the Colour_Contrast_Analyser.exe file.

About

The Colour Contrast Analyser was developed by JUn of .
in collaboration with Steve Faulkner.It’s development was inspired by the Juicy Studio Colour Contrast Analyser, the HP colour contrast verification tool and the Color Visibility Test Program by Chris Ridpath from the University of Toronto

Thanks to Gez lemon of Juicy Studio for the use of content from his online Colour Contrast Analyser & advice/comments from Andrew Arch and Sofia Celic

To provide feedback on the Colour Contrast Analyser email: