4 Mistakes you Cannot Make with the Colours of your Web

Like when we talked about fonts, there are also some colours that should not be used in webs (depending on the readability, the combination with the background colour…)

It is true that on many occasions we have commented on combinations of colours that can be very useful on the web: how we should combine them to make the most and at what point we can use them to fulfill their role.

Well, today we will talk about quick tips on how NOT to use the colours on the web. Almost a sacrilege such as if we use Comic Sans … For though a web usually is a blank canvas on which to combine colours, fonts and shapes, we must keep in mind that it should attract your visitors. The combination of these should be attractive and creative and never impair the readability of the text or the web.

We have resources like the colour wheel, which helps us to combine colours, but be careful! As we have said many times: within each colour there is a range of hues and it is up to us to make the right choice.

So, today we will talk about colour combinations that we should not use for our web! 😉

1. Too “vibrant”/ Too neutral

I’m sure it is not the first time you hear that virtue or the key to success is balance. Although it is one of the most difficult things, you have to find the middle ground. We always say that we must create contrast, but of course, without getting a seizure ;).

We know that two neutral colours will not give us contrast, but sometimes we tend to think that the sum of two bright colours can do it. It will be a web without force that will prevent reading for your audience.

For this, we must be careful with the colour saturation. The two colours should not be very saturated. You have to find the middle ground. A good option to check if your colour scheme is suitable is to convert them to grayscale. If after conversion, they are not read correctly, you should find another combination.

If you have decided the colours and after doing the test you check that they do not contrast, a very good solution is to put an intermediate colour, which suits both and either decrease or create contrast.

colour-no-visible

colours-vibrant

2. Neon Colours

Neon lights are perhaps outdated, but if it is true that the neon colours are trend now, especially for summer fashion in recent years, but we must be very careful with their use in web.

The main problem is the following. They are often used because we think they call more attention, but keep in mind that they are very bright colours that can annoy your eyes. A text in a neon colour, even on a black or white background, is virtually unreadable, besides harmful to eyes.

But not everything is negative; they can attenuate neon tones removing some shine lights and use it on elements of the web in which there is no great burden of reading.

color-neon-web-design

3. I love colours! = I have to use all the colours!

Although we always recommend the combination of two colours, at most three, it is true that depending on the design and the project it can be a good idea the introduction of more than two colours

What is never a good option it is a “rainbow of colours” combination. If you want to introduce colour effects use a gradient with bands in which the colours are appearing…

Better not. There are many ways to combine colours but think that they should do contrast with the text and above all, let reading!

bad-use-colour-web

4. The black is a good colour but … in moderation!

It is well known that the white/black combination is a safe value. They are the two colours that contrast the most and the ones that more mixed feelings represent; so it is a combination of great strength.

However when using this combination, it is good to talk about quantity. If everything is black you can give a feeling of heaviness, so introducing colours to mitigate black is usually a good idea.

black-use-colour-web

Think about what you want to convey and what the predominant colour is for. Even death is just black … Enter something that contrast and help to enhance or soften.

Leave a Reply

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