The collocation of webpage color and page text in web design

Open Tencent ISD this morning blog, see a new article, "Mini House Vision Specification", hurriedly read to learn. But let me catch the problem, smelly fish don't mind me here to say:

In this set of specifications, the buttons in the first level, the second level and the text used for the highlight of the third, red and white on the bottom of the red word is not consistent with the standard of the contrast of the consortium. Words that need to be highlighted and emphasized may not be easy to identify.

Screenshots of the use of Contrast Checker, based on the WCAG guideline 1.4.4 and 1.4.2, the corresponding provisions of the tool download and specific instructions can be seen in the Camellia oleifera this article.

This is a very useful and very scientific tool, the rabbit put it in the Windows Quick Launch bar, and recommended to colleagues. At the beginning, we had many years of experience in the design of visual designers disagree, that by the naked eye can identify the contrast. But then I caught a few times, relying on experience and the naked eye will also have to slip through the time AH. Now even our operations editors are going to do this, to make sure that the recommended pictures are eye-catching: D

Note that the contrast of text color is an easy thing to ignore. As far as I know Tencent's visual style for some products is to do user research, which also includes color positioning. And smelly fish mentioned this time, he said he was looking at, think the contrast is also clear. In normal environment may not feel anything, but if in some poor performance of the display environment , or color blindness anomalous trichromatism, poor eyesight , it seems that the difficulty. Even normal people, the face of poor contrast to the text for a long time to read will also be prone to fatigue , and impetuous color will make users of the product's emotional impact.

So the contrast of color is what the usability engineer should pay attention to? The rabbit thought it was primarily the responsibility of the visual designer.

In the University of Reading choreography design, the teacher asked us to complete before we see what their design in the Black-and-white environment. At that time no matter my teacher or myself, there is no knowledge about usability, never thought of color blindness anomalous trichromatism See how, just to ensure the performance of the works. But this is a simple and useful habit, in this year Photoshop to look at the color of the good.

Memories of the first to learn the composition of color, but also by the teacher was told to pay attention to the yellow color such Gomingdo use. Although the past two years have not done visual design, but the University of learning and international commercial art designer certification, still bring me a lot of work now useful things. Even if you don't talk about usability, this is a problem that a professional visual designer should pay attention to.

Finally, some suggestions are summarized :

After the visual design is finished, review the effect in grayscale color mode

Note the contrast on the page that needs to be highlighted and the body text

Usability is not a person or a job, visual design, interactive design, usability engineers, developers and even PM should pay attention to the