Principles of Interface Design: Colour

Whether designing graphics for print or the web, there are some basic principles worth noting if we want our designs to be well received. The technicolour horrors of the past can still be seen in the far reaches of the interweb, where these rules were obviously never applied.

Murch, G. M. in his book; ‘The Effective Use of Color’ (1983) makes these recommendations:

  • Avoid pure blue for text.
  • Avoid thin lines and small shapes.
  • Avoid red and green in the periphery of large-scale displays.
  • Note that all colors are equally discernible.
  • Do not overuse color.
  • Use similar color to convey similar meaning.
  • Use common background color for group-related elements.
  • Use brightness and saturation to attract attention.
  • Taking into account color-deficient viewers, avoid single color distinction.

Color combinations for user interfaces with graphic displays (Brown & Cunningham, 1989):

Background Best colors Worst colors
White Black, Blue Cyan, Yellow
Black Yellow, White Blue
Red Black Blue, Magenta
Green Black, Red Cyan
Blue Red, White, Yellow Black
Cyan Blue, Red Green, White, Yellow
Magenta Black, Blue Cyan, Green
Yellow Black, Blue Cyan, White

ReferencePrinciples of Interface Design


Image: Emotional and Psychological Meaning of Colours


1 Comment

  1. […] Images source: – – – – […]