Effective Use of Colour in Website Design

I recently took a course with Human Factors International on effective web and application design. The course covered several aspects of website redesign such as navigation, presentation, website prototyping, accessibility, interaction and content. Choosing the right color is essential to brand the product, sell your products and communicate your message. In this post I will focus on how to select the most effective colors for a website.


Color should be used to indicate highlighting or selection. Since not all of the content within a page has the same value; it is essential to use contrast to distinguish content that has greater significance than the others. Not only contrast can direct the reader’s attention to the important messages but it also helps enhance the visual appearance.

Contrast is used to help differentiate links, headings and navigation on a website. For example faded color can indicate something that is not available or a brighter color can be used for something that needs more attention.

Though contrast is a common way to emphasize text, one should not over do it as too much contrast may result in less visibility. Without proper contrast, visitors to the website may not return if they can’t read the text.

Natural Grouping Cues to show Relationships

The brain naturally uses color as a cue to discriminate and group objects. Subtle shades of color should be used to divide the layout into regions of distinct content or function.

Figure 1 is an example of a website that uses colors effectively in different areas to show a couple of things: First, the color layout indicates that parts of the website form distinct areas. Second, if the same color appears in different parts of the website, it shows that those areas are linked together and have something in common.

Figure 1: Effective use of color to differentiate sections on the website

Similar colors suggest a similarity relationship and different colors a difference relationship between objects and areas of the website. At first, it may not be easily noticeable that the colors in this website refer to the different sections (Travel, Money or Sports etc.) but the visitor will automatically know that similar color represents similar type. Forming associations through color is efficient effortless and very fast since it is wired into us. As shown in Figure 2, the use of different colors makes it very easy for the visitor to see these relationships across the website – For example it is easy to find money related news because it is in green or the sports news because it is in red.

Figure 2: Users know they're in a different area of an application based on color

Reinforce a Theme or Brand

The colors selected should reflect the intent and brand. If the colors are chosen that are based on the intended purpose of the website, then the color are guaranteed to be understood and respect users' wishes. Figure 3 shows some examples of websites that uses colors to effectively enforce the brand of the products/services.

Figure 3: Effective Use of Color - Reinforces a Theme or Brand

Avoid Inappropriate Color Combinations

The designer must never over use the colors or it may end up looking like the website shown below. It is appropriate to stick with a maximum of 5 colors in the theme to ensure a professional and clean look. Also, the color should never be used as a primary method of communication, but as a secondary method to reinforce meaning visually.

Figure 4: Overuse of colors makes it hard to read

To conclude, using black text on white may be boring but it is still very clear and easy to read. It is much more effective to use color gently to enforce a theme instead of using unreadable color combinations.

References: Human Factors International: The Science and Art of Effective Web and Application Design

Add a comment

Comment feed
The better to greet you with
No one will ever see this
Your pride and joy
The reason this comment form exists

The crew behind ASOT

We're a team of interactive, software, and business intelligence experts skilled in the design, construction, and management of online enterprise systems.

Visit The Jonah Group site

Get in touch with us