Colour with Contrast

Ann McMeekin | 4 May 2006

Want to make sure your site is readable by the widest possible audience without being "boring" and "ugly" but aren't sure how?

A selection of tools are now available to help you choose colours or check the colours you've been given to provide adequate contrast. Using these at the very earliest stages of the design process could save you potential headaches later.

Can't change the colours?

If you're given a colour scheme where none of the possible colour combinations are acceptable, improve contrast without sacrificing look and feel by using more neutral higher contrast colours for areas of text and use the given colours as accent colours.

Checkpoints and Algorithms

Checkpoint 2.2 of the Web Content Accessibility Guidelines (WCAG) Version 1.0 recommends an experimental algorithm for determining difference in brightness and difference in colour between two colours. Their recommendation is that the difference in brightness should exceed 125 and the difference in colour should exceed 500.

In the current draft of the WCAG Version 2.0 guidelines, checkpoint 1.4 relates to colour contrast, and recommends an algorithm based on the luminosity values of each colour. Success criterion 1.4.1 requires a luminosity contrast ratio of at least 5:1 for level 2 compliance, and at least 10:1 for level 3 compliance.

Web-based Tools

Downloadable Tools

Web Accessibility Tools Consortium (WAT-C) Colour Contrast Analyser (includes both algorithms and incorporates other useful related tests)
Juicy Studio Colour Contrast Analyser Firefox Extension (includes both algorithms)

References

Permanent link | Filed under: Accessibility, Usability

About the Author

Ann McMeekin spends her days working as a Web Accessibility Consultant for RNIB, where she puts her passion for accessibility together with her passion for good design, experience of working as a web designer and ability to be incredibly pernickity and moulds it into something which can be used to help other people make their bit of the web better.

When not working, she can be found blogging about life, the universe and everything (except work related stuff) at pixeldiva.co.uk, knitting, taking photographs, shouting at the TV and generally causing trouble wherever she goes.

She is Scottish, but has chosen to fly south and currently lives in London.

Articles by Ann McMeekin

4 Comments

| Post a comment | Comments Feed

Nik Steffen : http://useless-list.com

4 May 2006, 10:05 : Permanent link to comment

Great Ann, thanks alot. I am currently designing a new template for my site and colour is one of the major issues. Thanks Heaps.
Jack Sleight : http://www.reallyshiny.com

5 May 2006, 10:46 : Permanent link to comment

Hi, I’ve just finished off a PHP class that I’ve been working on that has functions in for checking Hex colour values. It checks if their brightness and colour differences parse the W3C recommendations. Might be useful for anyone wanting to check two colours server side, maybe on one these sites that let you customise your colour scheme. Hope its ok to post links, its here: Colour Tools
Mike Cherim : http://green-beast.com/

6 May 2006, 05:19 : Permanent link to comment

Here’s one more for your online tools list: GrayBit.
Mike Cherim : http://green-beast.com/

6 May 2006, 05:22 : Permanent link to comment

So sorry, I should have read the no HTML bit. The tool is GrayBit.com

Commenting is closed for this article.