Colour
Colour choice is a balance between the need to be obvious, avoiding wear on the eyes and setting the right tone.
Colour creates contrast and harmony. Different parts of a page (eg navigation, main content, title etc) need to contrast with each other so users can identify different elements quickly. But overall the page needs to sit well together and avoid making people feel sick.
The web is a high contrast medium.
Different screens display colours differently iMacs, smartphones, laptops with sun slanting across one corner, the dodgy flat screen at the internet café. Colours on the web are approximate. A high contrast colour scheme minimises the risk of variable colour rendering making your webpages hard to read.
Quick note on Pantone colour cards Throw them away. There's no guaranteed match between colour for print and the PC screen.
Which colours?
Most users now have high quality monitors so the range of colours available is extensive. But even the newest screens have much less resolution than print.
Users do not sit and revel in the million-colour glory of websites. They get to the point. A carefully chosen shade of purple won't seem different to the three rejected (probably after a series of long meetings) as too harsh, too red, too blue etc.
- Standard web palette - a colour chart with HTML code
- Non-standard palette - non-websafe colours that always work
- Colour variation chart - how standard web colours look to people with three types of colour deficiency
- Test colour contrast online at Gez Lemon's Juicy Studio website
Planning colour
Choose a palatte with one or two key dark and light tones. Plan for main text content to be black on white. Links need to stand out from the text and show which have been visited already.
- Blue is the standard colour for a link - users click on blue text
- Red is recognised more quickly than other colours
- Black on white has the highest contrast.
- Grey disappears - especially on laptops - at a glance it appears softer but it's hard to read after a few lines.
- Strong backgrounds highlight but glare over large areas
- Most users print webpages for reference, so how a page presents on paper - especially in black and white - is important
