Colour Tips for Web design

  • Main ingredient for legibility is contrast. You can test your legibility by converting your site to monochrome. Use strong contrast between the background color and the text color.
  • If you need to show pattern, place it in the center because our eyes work harder to take in patterns on the periphary.
  • Important information to the user does not reply on colour alone.
  • Avoid using too many colours at the same time, it creates a confusing overall effect.
  • Black text on white background is best.
  • Red and green are best used in the centre of the screen and black, white, yellow and blue are best used on the periphary
  • Brighter colours are better by interfaces that will be viewed for a long period of time or if designed for older users.
  • If you want colours to be easily distinguished from each other, use darker shades of blue, red, and purple and paler shades of green, yellow and orange.
  • Colours do not the mean the same thing to different people.
  • To convey low prices use brighter colours such a yellow
  • Beige, blue, burgundy, and dark green give impression of high quality, solidity and tradition.

Do Not

  • Do not use red and green where you need to distinguish between them to understand the content.
  • Do not use blue and yellow together when you need to distinguish between them to understand the content.
  • Do not use grey text
  • Do not use differnt blues simultaneously
  • Do not use fluorescent colours.
  • Do not pair extremes of wavelength (opposite ends of color chart) like red and blue as it induces headaches
  • Do not use high chroma colours together like blue and yellow



This page contains information I gathered and thought were very useful. See more notes on design.

Just to let you know, this page was last updated Thursday, May 23 24