Home Blog Blog Design Ideas How to Use Contrast in your Web Design

How to Use Contrast in your Web Design


Contrast in web designWhen it comes to website design, contrast is one of the most important things to consider. Without contrast communicating effectively is very difficult to achieve as your visual components will be out of balance. Great designers use contrast to direct your attention by creating flow. You can create contrast by focusing on three vital design elements, including colour, alignment and size.

How to use Contrast in Your Web Design

Contrasting Colour

When we talk about contrast, the first thing most people think about is colour – and it’s one of the most important components, luckily it’s also one of the easiest to grasp. Using different colours for your headers, footers and menu bars will set that content apart from your main content area, making it easy for users to identify different parts of your design.

Contrasting Size

Size can be particularly helpful for establishing a hierarchy among your content areas, especially if you are using a minimalistic approach or not relying on colour to guide your user. Using larger text in the main content areas, with smaller text on your headers, footers and menus tells your user that the main content area holds the most important information. Likewise using size to differentiate between headings and content not only directs the user’s eye, but allows them to distinguish easily between different layers of content to show where old content ends and new content begins.

Contrasting Alignment

Playing with your alignment to create contrast should only be done as a very last resort – and used sparingly. Creating separation with different alignments can be very effective, but if you’ve already incorporated the elements of colour and size effectively, then adding alignment too can be overkill. That said, a nicely indented quote or centred image can have a big impact when used correctly.


For help creating the perfect website for your business, speak to the team at your local Kwik Kopy today for an obligation-free design consultation.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
  • Pinterest

Leave A Comment

Your email address will not be published. Required fields are marked *