A while ago we were talking about mistakes that you could not make with the colours of your website. Errors that although at first might seem obvious, we commit more than we would like. Sometimes when we start designing, we get carried away by subjectivity and we forget that we are designing for a reason, and what is more important, for someone.
Well, today we take another step and as we talked about the importance of readability in the texts, not because we have vision problems but because we facilitate reading and therefore, we will make our visitors stay longer on our website, we must take special care for colour vision.
Normally it is not something you have in mind, because if you devote to the design is unlikely to have a problem distinguishing colours, but the population has them. And not only those with colour blindness, although it may seem a low percentage of the population is colorblind (almost 10% are colorblind,) but people who find it harder to distinguish colours.
Surely you have bought something and you think it is in such colour and your friends in another. Not all perceive colours in the same way. The different perception of colours is not a problem in those elements that are used for their aesthetic value, but in those where it is difficult to understand the content.
Clearly it is very difficult to design thinking in all types of colour blindness and all the problems of colour perception, but you can follow some general tips for people with a problem in distinguishing colours to understand the meaning of those elements important of your website.
While tips can be applied to all items, it may not be necessary that these apply to your entire web, but those elements that need a visual understanding to move forward. Elements where it is really important that the colours are understood to understand how the website works.
Let’s see them!
1. Overall: A combination between text and background
Here is an article that only talks about this (for those who want to expand with examples,) but in summary it says that it is very important to create contrast between the background colour and text colour so that it is legible. If we fail to distinguish text and background, we cannot read it, so easy, (just as it is necessary to monitor the size of the text, though we have already repeated ad nauseum).
If for a person who distinguishes all colours with shades and variants it is difficult to read a text in which there is no contrast between text and background, imagine for someone with a problem in distinguishing colours. The contrast between the two colours should be maximum. That’s why we always talk about black or dark gray text on white background, although there are other formulas that work, like red on white.
2. Overlapping elements: Text on image
In the same way as in the previous point we spoke of contrast between text and background, we must bear in mind contrast when overlapping text over an image.
Often images in the header of the web are used, and on them we put the name of the company or a subtitle sets. Well, although we understand that the image is important because it is the first thing the visitor will see, so it is the text, so that the choice of the same should be determined by the type of text (size, position …) we want to add.
We need to pay special attention to not have too many colours and that they correspond to the range of our website. As it is sometimes difficult choosing the perfect image, a good solution is to obscure the imagen to see perfectly the image in contrast with the text.
The second example with a dark tone makes reading text easier
3. Considerations in an online store
If we sell a product in our online store that is available in different colours, it is always very useful to putting a square, circle … with the same colour, which also appears in writing. If we cannot select the colour without reading it, we may have a problem with the process.
If you sell a shirt in turquoise and greenish gray … and you do not put it in writing, your audience may not be able to appreciate the nuance of distinction of colour in the image.
In this way, it is also very important to include a description of the product or product photography so those that do not distinguish colours know exactly the product they are buying. Moreover, it is highly recommended because there are few times when the pictures do not correspond with reality and with a reliable description can dispel doubts when buying the product.
The example on the right avoid mistakes in the choice of colours
4. Watch the colour of links
It is perhaps the most difficult of all point discussed here. If you want to make the links changing the colour of the linked letters, it is difficult if a person has great trouble differentiating colours to be able to appreciate it, because usually the letters has little thickness and unless there is a large difference in contrast between colours you can get lost.
However more and more ways to differentiate links exist, as underlined or colour boxes. Be a little creative and make your links look different.
Possible colours of web links
Example of how could see colours a person with colour blindness
5. Beware alert messages
If there is something about colour code that we are clear and indeed we have spoken on numerous occasions, it is that green means valid and red is error. It is the universal language and obviously we encourage you to use it: If something is working why we are going to change it?
But also keep in mind that green and red are the colours that give problems for people with colour blindness, so it is much better if they can be helped with a message or an icon.
If when filling out a form, fields that are bad simply appear in red (without alert) people may not know what fields are erroneous. Therefore, it is highly recommended to add an alert message.
The right column facilitates colour vision
Conclusion
As you can see, with simple details, we can make our website tailored for those who have a problem with the distinction of colours. As I was saying apart from some of the mistakes you cannot make with your web, there are elements that do not require a great understanding of colours for their understanding.
However, it is important to consider the elements that can lead to wrong and get some visual detail to distinguish them.
Finally I leave a tool, an extension that can be easily installed in Google Chrome and where it is displayed a website in the way colour-blinds see it.
I hope you find it useful! And colours will never be a problem for you!
