Wednesday, 17 January 2007

How to choose the right colours for your Web pages


Guy Mc Paul - Daily Web Dose © 2006 - 2007 - http://dailywebdose/


One of the most important things in web design and graphics is building a web site/web blog pretty much readable and possibly by the widest public. Background and text colours play a pivotal role before you start choosing logos and animated gifs...

According to WCAG 1.0 Checkpoint 2.2 you must
ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Moreover according to W3C Techniques For Accessibility Evaluation And Repair Tools
Ideally, images and multimedia object should also be tested for color visibility but algorithms are beyond the scope of this specification.

Color visibility can be determined according to the following algorithm:

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114))/1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

The range for color brightness difference is 125. The range for color difference is 500.

Finally according to WCAG 2.0 Guidelines 1.4.3
Text or diagrams, and their background, have a luminosity contrast ratio of at least 10:1.

Now following these guidelines seems very hard, but fortunately there are some tools that can be very handy when this problem must be solved. Follow these easy steps (click on images to enlarge).


Colour Contrast Check is a very useful web based application that allows to specify a foreground and a background colour and determine if they provide enough of a contrast. First of all go to Colour Contrast Check web page.
You will have to choose Foreground colour by using either the HEX #code (if you are testing a colour you already chose) or simply using the combination of the three Red-Green-Blue indicators to reach the colour you wish to proof.
Now you will have to do the same to choose Background colour; again you can use either the HEX #code or simply play with the combination of the three Red-Green-Blue indicators.
While you set these two boxes the third box on the right will display automatically and in real time will indicate:
  • YES! - If the colours you are choosing pass the test if both the colour difference and the brightness difference exceed their threshold.

  • Sort of! - If only one of the two values exceed their threshold.

  • NO! When both colours will fail to pass in case if neither value exceeds its threshold


It is time now to check your contrast on a greyscale basis. Again a web tool will help you to visualise your web site in greyscale and verify its readability. Access to and simply write in the address bar your site's URL, press the "Make it Grey" button, wait a few seconds and you will be able to see your web page in black and white and envisage if any adjustment is required.

Naturally you should carry out these two tests especially in case you are planning some web site/blog building and/or renovation. Good luck!

Bookmark this article:
BlinkListBlogMark this Fark FurlNewsVineRedditSimpySmarkingSpurlStumbleUponTailRankTechnoratiBookmark with WistsYahoo                                       Email This ArticleEmail this article

1 comment:

Anonymous said...

Wow!Thank You for sharing those info with us!

web site development is a very big business these days. Almost every company in the world is trying to make their make on the web. However creating a nice looking, functional web site is not very easy to achieve unless you have the right tools and workers to help you.

Search Engine Optimization should be considered during the planning of any web site. And the best time for implementing good SEO is during the initial design stage.

There are companies online that outsource webmaster service that could sure help other people who are thinking of setting up their own business web sites.

I hope this helps!