The efficient design principles that web designers should follow

Ryan Boudreaux, primarily for the hospitality industry and the federal government, wrote a series of articles on four design principles, the first Effective design principles for Web Designers:contrast , as follows:

If you have received a formal course in design, you may have learned about efficient design principles, which include four well-known standard concepts: contrast (contrast), repetition (repetition), alignment (alignment), and intimacy (proximity). Many people are referred to as Parc or crap. These four design principles are the standard knowledge of the design of the printing industry; in fact, several books have been asked to be textbooks for the subject (including design courses for non-designers), such as the third edition of the design book written by Robin Williams (the Non-designer ' s Design book).

This article will focus on the "contrast" design principle, which is related to the color of the web design and how to test the degree of color matching.

Contrast

From a new point of view, when two or more related elements are displayed in different ways, there is a contrast, the more obvious the difference, the more obvious the contrast. Putting similar elements on a Web page and translating them into unique entities, parts, or containers is a key point of efficient contrast. The most common way to build contrasting elements is to create different attributes of elements, such as colors, which seem to have been most widely used. Other properties include size, shape, texture, azimuth, position, and motion. But the two elements with greater contrast do not necessarily bring an attractive visual experience.

In Web pages, the color values of text and typographic elements can be a good contrast. The foreground color you want to test is the text itself, and the background color is any element below the text, whether it's a picture, a gradient, or an RGB color.

Complete the contrast with color

In web design, good color contrast is very important, not only for aesthetic value, but also for the accessibility of the Web. Some people have visual impairments or color blindness, and you should make sure that your site's color comparisons are adjusted to increase responsiveness and accessibility. So the test site color contrast is a good choice, the following list of tools to provide the brightness contrast of the page. The contrast is ideal at 4.5:1 or higher, which conforms to the WCAG 2.0 standard of the consortium.

Color Contrast Detection Tool

These tools can help you design your site so that your site has a suitable foreground color and background color contrast. Some tools can detect the balance of chromatic aberration and brightness difference, and show results, including brightness difference, chromatic aberration, color matching, alignment, and corresponding WCAG 2 values from AA to AAA level.

The Check my colours tool is provided by the free web developer Giovanni Scala, which can be used to detect the combination of foreground and background colors for all DOM elements in a Web page. Just enter the URL of the site to be tested, and the tool will show whether the DOM elements in the page are sufficiently contrasted to accommodate people with visual impairments. Check my colours All detection results are based on the algorithm recommended by the consortium. The following figure shows the results of the detection of the DOM elements in a simple web site.

Colour contrast check is provided by the Canadian web developer Jonathan Snook, which allows you to specify a foreground and background color and to determine whether they have enough contrast to accommodate people with visual impairments or read on a black-and-white screen. The following illustration shows the tool.

Luminosity colour contrast Ratio analyse is provided by the web Developer Gez Lemon, and the brightness contrast between the foreground and background colors can be calculated by entering a hexadecimal color code. The following figure.

WebAIM Color Contrast Checker can dim or brighten the original foreground color with the background color (16 RGB values) until it meets the AA standard. You can use this tool to change the color and change the brightness. The following figure.