Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Recently
Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

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

References

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

  1. Nik SteffenNik Steffen�s site : 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.

  2. Jack SleightJack Sleight�s site : 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

  3. Mike CherimMike Cherim�s site : http://green-beast.com/

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

    Here’s one more for your online tools list: GrayBit.

  4. Mike CherimMike Cherim�s site : 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.

© Copyright 2006 Bite Size Standards and Authors