Colour Contrast Visualiser screenshot.

This tool allows you to visualise good colour combinations on a Photoshop style colour picker. It's primary use is finding acceptable colours from an existing inaccessible combination - while maintaining the aesthetic appeal of the original.

Introduction

While designing for the web, I use the WAT-C Contrast Analyser tool to ensure my text and background colours are readable to a wide range of people and devices. Occasionally I happen across a combination that to me appears to have sufficient contrast but is failed by the tool, to arrive at a good contrast that is passed, I have to adjust one or both of the colours and recheck until they pass.

This is a tedious and time consuming task, and allot of skill is required to arrive at a combination that maintains the aesthetic of the original - the Colour Contrast Visualiser allows you to visualise the acceptable contrast ranges over a palette, so you can pick accessible colours with accuracy and confidence.

Development Information

This tool is still under development and is in beta status; that is, it isn't feature complete and for now serves as a proof of concept.

The luminosity ratio algorithm is used to calculate weather or not a colour combination is accessible, the threshold is set at 5:1 as recommended in the draft WCAG 2.0 Guidelines.

This is an AS3 Adobe Flex project, FlashDevelop was used for much of the programming on this tool, while Adobe Flex Builder was used for most of the interface layout. I extended the Korax ColorPicker Control for the colour picker component.

Planned Developments

There are a number of features I was hoping to get into the initial release, for now there is the beta. These will be developed for the full release:

  • Colour brightness and difference algorithm support
  • Large or normal text size toggle
  • Accessibility:
    • Keyboard access
  • Speed optimisations
  • Adobe AIR version

Other features I would like to explore:

  • Colour blindness simulations
  • Picking a screen colour
  • Accessibility:
    • Screen reader access
    • Text/background colour adjustment
    • Resizing & different viewing modes (Minimised layout for smaller screens)

Updates & Feedback

For updates on the development progress of this tool and new releases, keep an eye on the comments RSS feed below.

Comments and feedback can be posted in the comments of the blog post, or emailed direlectly to me (Contact).

Download

Comments

tdhooper says

1 August 2007 - 11:41pm

Beta

Version 0.9 beta published