Some time ago we talked about errors that you could not commit with the colors of your website. Mistakes, although at first they could seem obvious we make more of what we would like to. Sometimes when started to design, us leave carry by the subjectivity and us forget that we are designing by a reason, and what is more important, for someone.
As well, today is a step more and as already speak of the importance of the readability in them texts, not because have problems in the vision, but because so provide it reading and therefore, get that our visitors remain more time in our web; must take special care to the vision of them colors.
Normally it is not something that you have in mind, because if you do design it is difficult to have a problem of distinction of colours, but much is the population that if you have them. Not only already those that suffer from Daltonism, that although may appear low the percentage of population that is colorblind, increases if is a man (almost a 10% are colorblind). But people who find more hard distinguish colors.
Sure that happened to all that you have left to buy something and you have thought of such color and your companion a different. Not all perceive the colors in the same way. The different perception of colors is not a problem on those elements that are used for its aesthetic value, but if those in which it is difficult to understand the content.
Is clearly very difficult to design thinking in all types of color blindness and all the problems of perception of color but it you can follow some general tips so that people with a problem in distinguishing colors, could understand the meaning of those important elements of your site to adapt to the web responsive.
Although them tips can apply is to all them elements, perhaps not be necessary that this is apply to all your web, but to those elements that need a understanding visual to continue advancing. Elements, in which is of vital importance that will understand them colors to understand the operation of the same.
We are going to see them!
1. in general: combination between text and background
Here’s an article in which we only speak of this (for who wants to expand with examples), but in short, is very important to create contrast between the background color and text color to make this readable. If we fail to distingur the text background, you can not read it, that easy (in the same way that it is necessary to monitor the size of the text, although we have already repeated it ad nauseam).
If for a person that distinguishes all them colors with their shades and variants is difficult read a text in which not is appreciate the contrast between the text and the background, imagine it for someone with some problem in the distinction of colors. The contrast between the two colors must be Max. By that always speak of text Black or grey dark on bottom white. Although there are other formulas that they work, like Red on white.
2 overlapping of elements: text on image
Of the same way that in the point above speak of contrast between the text and the background, have of have very in has when superpose the text on an image, that persists that contrast.
Many times are used images in the header of the web and on them is puts the name of the company or a subtitle. As well, Although we understand that that image is important, as it is the first thing you will see the visitor, so is the text, that the choice of the same must be determined by the type of text (size, position) that want to add.
We need to pay special attention to not have too many colors and that these correspond to the range of our website. As sometimes is complicated the choice of the image perfect, a good solution is darken it of waythat is understand to the perfection it image, but that the text contrast with it.
The second example, a darkened tone, facilitates the reading of the text
3. considerations in a shop online (web)
If we sell a product in our online shop that can be purchased in different colors, it is always useful in addition to a square, circle… with color, appearing also in writing. If you can not select the color without reading it, we may have a problem in the buying process.
If we sell a shirt in green turquoise and in grey-green… If not it put by written, maybe not all your audience is capable of appreciate the nuance of distinction of color in the image.
In this way, it is also very important to include a description of the product , or product photography, so that does not distinguish colors can know exactly the product that is going to buy. In addition, this is highly recommended as there are few times in which the photographs do not correspond with the reality and with a vivid description is can clear doubts at the time of the purchase.
The example of the right prevents equivocal in the choice of colors
4 watch the color of the links
Is perhaps the point more difficult of all which is treated here. If you want to mark the links by changing the color of the linked letters, difficult is that if a person is struggling to differentiate colors is able to appreciate it, because normally the letters has little thickness and unless there is a great difference in contrast between the colors may be lost.
However, every time they are more ways that exist to differentiate links , such as underscores or color boxes. Is a little creative and get that your links look different, but to point them, in the moment in which is makes hover.
Possible colors of the web links
Example of as it could see the colors people with color blindness
5. care with alert messages
If there is something for Code of colors that have clear and that indeed have spoken on numerous occasions, is that the Green valid and the Red is error. It is the universal language and obviously we encourage you to use it: If something works are not going to change it.
However we must also bear in mind that the Green and Red are the colors that give more problems to people with color blindness, which always is to help with a message or a better than icon better.
If when filling out a form, simply appear in red those fields that are wrong (no warning message) may be people who do not know what are the wrong fields. By that, is very advisable to add a message of warning.
The column of the right facilitates the vision of those colors
As you see, with simple details, can get that our web is adapted for those that have some problem with the distinction of colours. As came saying, to part of them errors that not can commit with your web, there are elements that not require of a great understanding of them colors for its understanding and in which therefore not there is that watch both to them themselves.
However, is important to take into account the elements that can lead to wrong and get some visual detail, so distinguished.