Backgrounds: Mistakes + Remedies

Common mistakes with background colours and images, and how to remedy them.

Your site background can often be a subtle (or not so subtle) factor in the overall harmony of your design. In this article, we take a look at some common mistakes with backgrounds and simple ways to overcome them.

Mistake #1: Loud & Intense Colours
An intensely coloured background takes a lot of attention away from the content (text and images) in your foreground. This can add a bit of creative or “conceptually artistic” flair, but under normal circumstances, a loud background colour becomes self-defeating to your site. Additionally, prolonged exposure to large blocks of bright, intense colours can be a strain on the eyes - an unpleasant experience for your visitors.

    Remedies:

  • Reduce the intensity (saturation) of your background colour, eg. #FF6464 instead of #FF0000.
  • Reduce the brightness of your background colour, eg. #8DC9C9 instead of #00FFFF.
  • Reduce the whitespace (or in this case, “brightspace”), ie. let your content and foreground take up more room on the page.
compare the intense colours to their gentler counterparts

Mistake #2: Animated Backgrounds
Animations can be lots of fun, but they are also a big distraction factor, as detecting movement is one of our innate survival strategies. Flashing animation is also known to be a trigger for epileptic fits.

Did you know: “Certain special effects such as spiralling, throbbing or flashing have been reported to cause epileptic seizures and should be avoided.” - (further reading)

    Remedies:

  • Reduce the intensity of the colours in your animated background to reduce the “in your face” factor.
  • Use subtle, slight, slow animations.
  • Avoid animated backgrounds altogether!

Mistake #3: Detailed Backgrounds
When used well, detailed backgrounds can be very effective in achieving the look and feel you desire. But they do carry the risk of interfering with the presentation of your content.

high-contrast detailed background interferes with textuse of a semi-transparent block of solid colour
    Remedies:

  • Reduce the colour intensity and contrast of your background image.
  • Use a slightly opaque block of solid colour between your text and background (as shown).
  • Set your text colour to greatly contrast the colours in your background.