Determining the colour contrast between foreground and background colours is a time consuming task, but is greatly aided by colour contrast analysers. The problem with colour contrast analysers is that they don't automatically go through all of the possible colour combinations in a document; instead, it requires a judgement call by the person evaluating the page to decide whether colour combinations look like they may be problematic, and then to enter those colours into a colour contrast analyser.
I've written a Firefox extension that reveals the colour contrast of all elements in the DOM. If you evaluate websites for colour contrast, this extension will be useful for saving you time, and also take out the guesswork required to determine which colours to test.
Author: Gez Lemon
Colour Contrast Analyser
The Colour Contrast Analyser Firefox extension lists colour combinations used in the document in a table that summarises the foreground colour, background colour, luminosity contrast ratio, and the colour difference and brightness difference used in the algorithm suggested in the 26th of April 2000 working draft for Accessibility Evaluation and Repair Tools (AERT). Each element is also listed with its parent elements, and class and id attribute values when specified to make it easier to locate the elements.
Only elements that contain text are listed. This avoids listing contrasts that could fail on colour contrast, but only contain elements where the styles are overridden and pass. For example, if the colour contrast for an
li element is poor, but all
li's for a particular list only contained anchor elements, then only the anchor elements are analysed. In the case of an element that contains other elements but also has text content, then the element is analysed. Duplicate elements that share the same parents with the same class and id attribute values are only listed once. This saves listing things like the
li element more times than necessary.
When an element's foreground and background colour combination fail either the luminosity contrast ratio or the colour contrast algorithm suggested by AERT, the whole row is coloured yellow. To avoid showing information by colour alone, I've also added a thick border around the row to emphasise it. It's important to remember that both the luminosity contrast ratio or the colour combination algorithm suggested by AERT have never been recommendations; they're suggestions by two WAI working groups to help determine whether or not the contrast between two colours can be read by people with colour blindness or other visual impairments. The luminosity contrast ratio algorithm will become a recommendation when WCAG 2 becomes a recommendation if it is still listed in the guidelines.
The colour contrast analyser only examines the difference between foreground and background colours for text elements, so won't detect scenarios where text is written over the top of a background image. The analyser also misses dynamic changes, such as hover effects.
I've tested the extension on a few websites, and it seems to be working reliably. If there is anything I've missed, or you can think of ways of improving it, then please email me or leave a comment.
The Firefox Extension
As with all Firefox/Mozilla extensions, you will have to restart your browser for the extension to be installed. Once installed, you can activate the extension by either right clicking on any web page, and select Colour Contrast Analyser from the context menu, or select the Tools menu item, and then the Colour Contrast Analyser menu item (Keyboard shortcut: ALT+T followed by C).
- Added ability to select type of test required (all tests, luminosity contrast ratio, or using the AERT colour contrast algorithm), following a suggestion from Jim Thatcher. (2006-02-13)
- Ignore elements that cannot contain text nodes (such as
script), following a suggestion from Steve Faulkner, plus some optimisation of code. (2006-02-14)
titleattribute via the DOM, and added explicit colour options to the style sheet, following a suggestion from Paul Arzul. (2006-02-17)
- Fixed a display problem when the colour intensity for red, green, or blue was less than 16, reported by Steve Ferguson. (2006-02-18)
- Optimised the code, following a suggestion from Paul Arzul. (2006-02-21)
- Localised version provided by Steve Faulkner. Translations for languages other than English will be added as when they are received. (2006-03-02)
A special thank you to Steve Faulkner for coordinating the translations.
- Brazilian Portuguese, kindly provided by Mauricio Samy Silva. (2006-03-07)
- Japanese, kindly provided by Norio. (2006-03-08)
- Polish, kindly provided by Peter Mikolajski. (2006-03-23)
- Italian, kindly provided by Livio Mondini. (2006-04-03)
- French, kindly provided by Bérénice Mougenot. (2006-06-26)
- Russian, kindly provided by Dmitry Y. Krasnikov. (2008-07-08)
Category: Mozilla/Firefox Extensions.