By the end of this section, you should be able to:





Colour is a powerful communication tool; unless it is misused or overused. Colour plays a significant role in interface design, the Internet and web design. We will analyse the different factors that should be taken into consideration when using colour in the display of information in IT. Dealing with colour may become a serious hassle if certain factors are not considered.

Colour Combinations


Simplicity, clarity and consistency are especially important when handling colour in visual communication. Appropriate colour combinations should be used to allow viewers to receive the information properly. Avoid combinations of strong contrasts such as red/green, blue/yellow, green/blue. Such combinations of colours are inappropriate, as they usually create a sense of vibration, or illusions of shadows and after-images

Avoid such combination of coloursAvoid such combination of coloursAvoid such combination of coloursAvoid such combination of coloursAvoid such combination of coloursAvoid such combination of
Avoid such combination of coloursAvoid such combination of coloursAvoid such combination of coloursAvoid such combination of coloursAvoid such combination of coloursAvoid such combination of







Back to top


Colour contrast

Backgrounds are very important in Visual Communication.When choosing a background colour you should think of the other elements that will be included in your layout, that is the images, text,etc.
To increase visual accessibility to your design, use colour contrast. For example black text on a light orange background is more effective than a light red on an equally light green background. Remember that colours which do not contrast sharply in lightness should not be used together.

Colours that are adjacent to each other on the colour circle should never be used together. For example red found next to orange is not a very appropriate combination. On the other hand, yellow which lies opposite to violet make a better colour contrast effect.


Effective colour contrast
Visibilty poor
Effective colour contrast
Not appropriate contrast
Back to top


Consistency in colour
Consistency can be achieved through the use of colour.The sense of relatedness over space and over time in
sequences of images can be achieved by appropriate colour coding. Choosing a small palette of colors and type
styles and applying them consistently throughout the site will no doubt bring order and tidiness/neatness to your
web pages.

The colour palette used for the VCILT site is derived from the VCILT logo.Consistency is achieved by using
different values of the hues from the colour palette throughout the site. Colours used for the background are of
low intensity thus giving a light, clean and simple appearance to the web site.

Click on the image below to see how colours have been used in the menu bar of the VCILT web site. Colours
from the palette have again been used but in lighter values. On click the same colour is kept but in variations.
For e.g: on mouse over, the "overview" button changes its initial state to a light green button.
And on click the text changes from light green to dark green.

Back to top
Colour Symbolism
Colour associations is a very important factor in visual communication.
The correct use of colour requires careful
analysis of the experience and expectations of the viewer. You should be careful about colour connotations and should
respect existing cultural and professional usage. We learn color associations from the culture in which we live.
Color symbolism can vary dramatically between cultures. If your audience includes people of cultures other than your
own, make an effort to understand what meanings those cultures associate with color.
For example: In certain eastern cultures "red" may be considered as a positive colour and on the other hand
in Western cultures the same colour may suggest danger (stop signal in traffic lights).

Back to top

Colour in Icons/Links/Buttons
The function of colour in hypertext is a very important factor in visual communication. A blue coloured underlined text is
usually a link and when you click on it, the colour changes to purple. For example when you surf on the Internet you
usually come across lots of links and once you have clicked on one, you will notice a colour change which
informs you that the link has been visited.


Moving your cursor or clicking on an icon generally creates a colour change. This change of state helps differentiating between a plain text and a hyperlinked button or an icon. Check the examples on the left to see what we mean.The button on the left could be a heading whereas the right button provides a visual feedback when you move your cursor over it.
The change of state in the "stop" icon in Internet Explorer.

Back to top

Activities on Colour

Colour Typography Vector Images Colour Modes


Bitmap Images Image Formats