About   -   Contact   -   Purchase   -   Search   -   What's New

Practical Use of Colour
I always say you can spot a Visual Basic application by the gratuitous use of colour. Just because you can make the windows controls in your application any colour you choose does not mean you should!

I am not advocating the removal of all colour in your applications, but by a consistent use of a limited number of colours and using other methods for visual cues such as borders and pointers which will be the topic of other articles your application can be made to look and feel much more professional. When was the last time you saw a Microsoft application with green text entry fields multicoloured buttons. You get the picture.

Enough of the soap box, now on to the topic at hand.

Windows Colour Constants
The first mistake a lot of people make is not to make use of the windows predefined colours, these are:

  • Windows Background
  • Windows Text
  • Application Workspace
  • Button Face

Although some times you may perform some development work for a company who specify the colours for all elements of the interface. Where they do not make sure you use the predefined constants for these windows defaults. There is nothing worse than using an application that has sometime used the predefined standards and other times used what was the standard for their machine. Picture the window on the users machine who has the windows background colour specified as mint and the application window with half the fields defined as white and half defined as windows background! It may have looked fine in development but at run time yuck! When you are testing your application, set all the windows default colours to some wacky values then you will quickly and easily spot the invalid use of these colour constants.

When To Use Which Colour
The following list describes common situations and the colours that should be used in those situations.

  • All windows backgrounds should be Button Face.
  • All command button backgrounds should be Button Face and the text should be Window Text.
  • Editable fields should have a background colour of Windows Background and the text should be Windows Text with a 3D lowered border. Do not use any other colours for special meanings for example; all red fields are mandatory. What if your user is colour blind and cannot see the red? A future article will describe a more universal solution to this problem. The same goes for Listboxes, Checkboxes, Radio buttons and all the other standard controls.
  • Non Editable fields should have a background of Button Face to indicate to the user that the field is not editable. If you just disable the field they will try to click into it.
  • A List of multiple columns that are not editable but are used for selection purposes should have a background of Windows Background and a text colour of Windows Text with Dark blue being used to indicate the selected row. If multiple rows can be selected then blue indicates a selected row and a dashed rectangle indicates the current row. The header row of the list should be windows background with Windows Text for the text and a 3D raised border.
  • A list of multiple editable columns should have a background colour of Button Face and should follow the normal edit field rules described above for the editable columns.
  • Group boxes should always be 3D lowered with white and dark Grey for the high and lo lights of the rectangle. Not Windows Background and Application Workspace as some applications use yuck! The text should be Windows Text.
  • Tab pages should be Button Face. Not a different colour for each tab!
  • Where possible any custom icons or images used in the application should stick to the basic windows 16 colours and make sure the background colour of the image is correctly masked to match the background colour of the are underneath the image. For example if you have a company logo with a Grey background on your logon window with a Windows Background for its colour then anyone who does not use Grey for their windows background will see an ugly Grey border around your image.

Following these simple colours consistently will help to give you application a more professional look and feel which the tired eyes your users will appreciate, of course there us much more to a professional looking GUI but that's a topic for another article.


Top of Page

Legal Notice

Ken Howe 2011