Basic Colour Pair Analyser


 

Before you start: see About the Tests, below.
To analyse a colour pair, use the following form:

  

About the Tests

Colour Format

For each form field, you can enter either a six digit or an abbreviated three digit hexadecimal colour (with or without the leading # sign) or one of the 17 standard CSS colour names listed below. (Colour values are not case sensitive.)

  •  aqua : #00ffff
  •  black : #000000
  •  blue : #0000ff
  •  fuchsia : #ff00ff
  •  gray : #808080
  •  green : #008000
  •  lime : #00ff00
  •  maroon : #800000
  •  olive : #808000
  •  orange : #ffa500
  •  purple : #800080
  •  red : #ff0000
  •  silver : #c0c0c0
  •  teal : #008080
  •  white : #ffffff
  •  yellow : #ffff00

For details on specifying colours see *CSS 2.1 Colors.

Main Test - WCAG Contrast Ratio (a.k.a. 'Luminance Contrast Ratio' or 'Luminosity Contrast Ratio')

W3C *Web Content Accessibility Guidelines (WCAG) define three levels of conformance: 'A' (single-A), 'AA' (double-A) and 'AAA' (triple-A) in increasing order of stringency.

According to *WCAG Guideline 1.4, regarding colour contrast normal text must have a contrast ratio of at least 7:1 to satisfy 'AAA' requirements and at least 5:1 to satisfy 'AA' requirements. For *larger scale text, these requirements are relaxed slightly and 'AAA' guidelines require only 5:1 or higher and 'AA' 3:1 or higher. There do not appear to be any restrictions on contrast ratio for single-A conformance. It is the WCAG *Luminance Contrast Ratio Formula which is used on this site.

Other Tests - AERT Brightness Difference and Colour Difference

Two subsidiary tests, for brightness difference and colour difference, are also carried out by the analyser. These tests are based upon relatively old W3C formulae at *Techniques For Accessibility Evaluation And Repair Tools - Checkpoint 2.2.

  • A colour pair passes the Brightness Difference test if there is a Brightness Difference of at least 125.
  • A colour pair passes the Colour Difference test if there is a Colour Difference of at least 500.

These are both simple pass/fail criteria with no distinction between the different accessibility conformance levels.

These tests have essentially been superseded by the WCAG Contrast Ratio test above and are included only for completeness.


Page Footer & Copyright

Copyright © Sally Maughan 2005-2009 (Page last updated on 19 May 2009)

*Valid XHTML 1.1 - hosted by *Openstrike

W3C, XHTML, XML, HTML, CSS and MathML are *Trademarks of the W3C (*MIT, *ERCIM, *Keio) with which the site's author has no connection.


Up, Next & Previous Links

Your Location

Home > CSS Home > Colour Pair Analysers > Basic Colour Pair Analyser