WordPress Website Design Fundamentals: Colours In Web Usability

Would you deem green or blue food appetising? How about when you know what’s in it — just chicken, some regular spices, and a touch of white wine? You’d still be put off by its colour, wouldn’t you? This is the effect of colours — a psychological, almost uncontrollable effect. And it is everywhere, even in your WordPress website design.

This means that how you use colours in your design can help your endeavours like inbound marketing, conversion, and sales — or otherwise.

Colours and Associations

Colours play an integral role in website design and usability particularly because they are among the most powerful factors that invoke subliminal, psychological reactions in website visitors. Ask anyone about what they associate with specific colours and patterns will easily arise: red is associated with passion and energy, sometimes blood and violence and therefore negative connotations; blue is associated with peace and tranquillity, sometimes nobility; white is the symbol of cleanliness and purity; and so on and so forth. These associations are powerful because they are subliminal and nearly intuitive. Of course, associations are also cultural and based on upbringing, for instance, yellow can signify cowardice in western societies while it is a symbol for courage in some eastern countries.

If you neglect to properly use colours — or at least understand them — you run the risk of invoking a subliminal psychological reaction from your website visitors that may make it harder to turn traffic into leads or conversions. Fortunately you don’t need a master degree in fine arts, you just need to know the fundamentals and other effects of colour in web usability and website design.

Another bit of good news is that in your WordPress website design, you have full control over the choices of colours

Background Colours and Their Effects

When we say background colours here we mean the dominant colours of your website in the background, and not just the single colour you used if you employed a monochrome background scheme. The dominant background colours — the hues, the tones, and the shades — contribute to the general feel or mood of the website because they dominate the background. Visitors may not pay much attention to them but they’re always there, like a reminder at the back of their minds. Since we’re talking about dominant background colours, this also applies to the dominant colours of a background image.

Please feel free to share this WordPress Website Design Fundamentals content, I appreciate it mainly because it helps grow the site. Also, if you happen to be looking for further assistance for your website design, then simply head over to the Web Design Edinburgh page and get in contact.

To put this into better perspective, the same concepts generally apply when presenting a slide show. The dominant background colours communicate what mood or feel the audience should be in. This means that using the wrong background colours can cause a presentation to lose some of its persuasiveness. For instance, a presentation persuading viewers to invest in something using a red background will not work as much as the same presentation using a green background, because in finance, red symbolizes loss and green often symbolizes gain.

Again, this concept applies to your WordPress website design. Know what your audience’s common associations to colours are and leverage the subliminal, psychological mood-setting prowess of background colours to your advantage.

Foreground Colours and Their Effects

Foreground colours typically mean the colour of the font used within a website, but for our purposes foreground colours are comprised of the colours used for website design elements that are in the foreground. As examples: theme colours are background colours; widget colours are foreground colours And of course, font colours are also foreground colours If background colours set the mood, foreground colours hearken to cognitive processing — basically, they appeal to the part of the mind that is focused. Backgrounds messages are subliminal, foreground messages go directly to thought processing.

Luckily, this means nothing as complex as it may sound. You merely have to follow two main guidelines:

  • Use foreground colours that complement the background colours or contrast with it without clashing, and
  • Do not use font colours that can distract visitors from your website content’s message

Foreground colours should ideally complement background colours or images, or contrast well with them without clashing with them — that is to say it does not hurt to look at. As for font colours, avoid using radical font colours (such as pink or violet) without a purpose. Anchor text has three colours: one when not used, one when the mouse pointer hovers over them, and another when the link has been used. Avoid using distracting colours in these choices as well. The purpose of avoiding distraction is to always keep the message of your website content coherent, circumventing possible confusion and other unintentional connotations.

Ads and Ad-Like Elements

Another important facet of website design is the ads and ad-like elements within it. Ads are nigh unavoidable, so providers like Google AdSense often allow you to design your ads to make sure their colour schemes match or complement your website design. This is because of a phenomenon called banner blindness.

In a nutshell, banner blindness is an almost automatic psychological quirk that makes people ignore ads or ad-like elements within a website. This is a recent psychological reaction to years of interruption marketing using display ads back during the infancy of the web. Google AdSense and other display ad providers know how real banner blindness is, so they allow customization of ads. For your WordPress website design, the biggest lesson of banner blindness is to avoid formatting or designing elements to appear like ads. This means that elements you want to call attention to should be designed using positive contrast: in a way that makes them stand out, but at the same time in a way that does not make them look similar to an ad, effectively circumventing banner blindness.

On a side note, make sure the coding for these important elements are markedly different from ads as well, as some ad-blocking browser add-ons or plugins might mistake them for actual ads.

While you shouldn’t make too much of a fuss over the colours you use in your WordPress website design, you should at least care enough to know some of the fundamentals, lest you end up defeating your own purpose subliminally.

Scroll to Top