final

June 24, 2016 | By Jilu Joseph

Four mistakes you can’t make with the colours of your website

Similar to fonts, properly handled colors are vital to helping the user feel helpful when entering a webpage and serve eye-catching layout to get them to get their attention towards the content. For this reason, web designers must use them both accordingly and in creative ways without compromising the website’s text legibility, which must go hand-in-hand with easy to read fonts that give the website a professional look.
Today we’re going to give some quick and useful tips to get an insight on what to avoid when mixing colors from the chromatic circle while trying to choose a palette for our website’s layout.

1. Colors are too vibrant/too neutral.

Everyone may have an opinion on what may be the adequate colors to go with a certain background on a website, but reaching a middle point is important when you’re presenting your clients a prototype of their new website. Color contrast will be the first thing that they will put their eyes oncethey take a glance at it, so it is important to be mindful to put it on the right places. We know that two neutral colors aren’t going to give us contrast, but that may lead us to the other extreme, that two brilliant colors will give us the energy we want to give to our website, and that may backfire on more important things, like readability.

To solve this, we have to be careful with color saturation; the two colors chosen must not be too similar or too saturated, as they can be distracting. One way to check if a color choice is adequate is to take it to a grayscale, if it is readable, you have an adequate contrast, if it isn’t you must keep trying until you get it right. In the other hand, if you have already finished designing a website, and you find out using the previous test that they don’t contrast at all on a grayscale, you can go to the chromatic circle and choose an intermediate color, to give them a proper tint, to reduce the overall contrast or give place to the proper one.

4mistakes-1

2. Excessive usage of Neon Colors

While neon lights may be out of fashion, certainly neon palettes are not, as they’re widely used around the web nowadays. While they may be catchy and pass with flying colors our previous test, we must be careful about their usage. They’re useful to call the visitors attention to individual elements of the website, like hyperlinked content and headlines of certain objects of the website, such as articles and descriptions, but using them on the content must be done carefully. Relying too much on neon palettes may have a hit on the amount of time the user will spend on the website, as this kind of palettes are known to cause eyestrain when looked at over long periods. Eye-catching elements are meant to be an invitation to take a look at the content of the website, not to distract them from it.

4mistakes-2

3. Using too many colors at once: rainbow patterns.

While depending on the kind of project you’re working using more colors than the usual two or three-tone palette may be appealing, for example, to independent fashion designer blogs. Using them without a thoughtful design in mind may be detrimental to the overall browsing experience as it neglects all the designer’s effort to focus the visitor’s attention to the overall content of the website, as there’s no lead of where the important things are. A degrading set of colors aided by the chromatic circle may be a better option if the client decides that’s the way to go for their website’s appearance, as it helps to ease up the overall contrast and keep the focus on other website’s elements. In general, this kind of patterns are better left as backgrounds and away from the text, which should always be under a single-toned background, as this kind of patterns detrimental to the readability of the content.

4mistakes-3

4. Black/white minimalism may be tempting, but use it with moderation.

A black/white combination is an easy take when you’re starting on web design and want to focus your work on other areas of your website’s design, as it is easy on the eyes and provides a good contrast. Using it as your only color resource to catch the visitor’s attention is often a poor choice, as it doesn’t transmit any particular feeling other than that content prevails over anything else on the site.This may be good for minimalist writing websites and text-only blogs, but to most kinds of websites is more useful to introduce non-neon palettes along with it to help emphasize content and guide it through what the website has to offer.

These are our tips to help you design websites with proper color choices to get some meaningful work done. If you have any suggestions or opinions about the article, let us know in the comment section.