Discussion of text color and readability: High saturation is not easy to read

One saturation and legibility:

Last week in doing a project F classmate, involved more list of text links.

Currently remove the channel and home page, the whole station text link using a consistent blue, color value of #014ccc, saturation is higher, in the user browsing more easily attract attention, but also easy to cause visual fatigue, high saturation of the text is not easy to read.

In the figure above, the lower part of the text reduces the saturation, is it more comfortable to read than the upper half?

In fact, most portal class sites also use low saturation blue as a list link color:

Conclusion One:

The color saturation reaches a certain value, the visual nerve to this color will generate excitement, it is easy to produce fatigue in reading.

Two about the threshold of visual nerve excitation:

Because the light of each color is different from the primary wavelength, the threshold of saturation that causes the excitability of the human eye is inconsistent.

In the spectrum, red, orange, green, cyan, violet, the wavelength decreases in descending order, the saturation of the nerve excited by the eye is increased first and then reduced arc shape:

Longer-wavelength colors and shorter wavelengths of color, relatively low saturation can stimulate the visual nerve excited, and the wavelength in the middle of the green cyan, you need a relatively high degree of saturation to stimulate the visual nerve excitement.

As can be seen from the figure, Blue is also the saturation of the excited critical point of the lower color, so should be cautious with high saturation of blue.

Conclusion Two:

The same saturation color, red and purple are most likely to produce visual nerve excitement, followed by yellow and blue, again green and cyan.

Therefore, from the simple color, in the design should:

1. Use low saturation red and purple as far as possible;

2. Prohibit the use of high saturation of red, purple;

3. Use a small amount of high saturation yellow, blue.

The relationship between lightness, hue, and saturation.

1. Noun Explanation:

A) First said the degree: is the degree of light and shade, also called brightness, the computer is divided into 256 levels of brightness, black pitch-black is 0, the whiteness of a piece of what can not see is 255 levels:

b) to say that hue: is usually said what kind of color, the spectrum of red, orange, cyan and purple, as well as thousands of combinations are different hue.

C finally said saturation: is commonly said the color purity, the brightness degree and so on.

2. The relationship with Red,green,blue monochromatic light:

A to find out some rules of color generation in computers:

I.rgb three kinds of primary color light, at the same time by mixing 1:1:1 proportion, can produce 1 white light;

Ii. Any of two primary colors in RGB, the mixture can only produce another hue of the light, not the white light;

Iii. any kind of primary color light, the effect of the brightness level is half of its value, the conversion of the color order will not exceed 127;

Because any of the two colors produced by the combination of color, color levels can not exceed 255 levels that is, white light.

For example #000002 blue picture, in its blue channel color level is 2 levels, but converts it to the grayscale picture, the color value is #010101, explained this picture the brightness level is 1.

IV. The RGB values mentioned below refer to the hexadecimal values of each color channel:

b brightness and RGB minimum value, the maximum value, the calculation method is as follows:

The smaller the maximum value in the I.rgb, the less the shade, the lower the brightness;

Ii. The smaller the minimum value in RGB means the less white light is generated, the lower the brightness

C in the same brightness, hue and RGB maximum, the minimum position, as well as the size of the median:

I. In the same brightness, the color RGB maximum and the minimum value of different hue always remain constant;

Ii. The position of the maximum and minimum values in RGB affects hue, such as #775533 and #557733;

Iii. Transform RGB intermediate values can affect hue, such as #ff0055 and #ff0088;

D saturation and the maximum value in RGB, the difference between the minimum value is related to:

I.rgb The maximum value, the difference between the minimum value is greater, the saturation is higher;

Ii. When the minimum value tends to 00 in RGB, or the maximum value becomes FF, the saturation cannot be improved.

Conclusion Three:

1. When the color is darker (that is, RGB does not have a numerical value to FF), increase the brightness can increase the saturation of the purpose, reduce the lightness will reduce the saturation;

2. When the color is lighter (that is, RGB does not have a numerical value of 00), increase the degree of brightness can reduce the saturation of the purpose, reduce the lightness will increase the saturation;

3. The greater the color saturation (ie, RGB maximum and minimum difference is greater), in the same lightness of the spectral range of the larger (you can change the color type less);

4. The smaller the color saturation (ie, RGB maximum and minimum difference between the smaller), in the same lightness of the spectral range is smaller (you can change the color type less);

5. Hue changes will not affect the degree of visibility and saturation;

Four based on these studies, what can we get to use?

1. High saturation of Red (#FF0000), Purple (#FF00FF) recommended not to use;

2. High saturation of Blue (#1834D1), Orange (#FF4E00), can be used for a small amount of text can better attract visual attention, but it is best not for the links in the list;

3. Based on the previous analysis, we concluded that modulation can be used for list link blue methods:

By lowering the blue channel color level to reduce the overall saturation of the color (for example, adjusting the #0000ff to #000099), to avoid darkening, and black confusion, we can also increase the levels of other primary color channels and adjust their brightness (for example, to adjust the #000099 to #005599).

4. Color is not coordinated, you can reduce the saturation to achieve coordination, but also through the use of adjustment hue to achieve the purpose:

A ready-made example is the #ff4e00 color values used in our web pages, and #ff0000 saturation is in fact consistent (do not believe that can be turned into grayscale), the reason the color value of #ff0000 is more dazzling, because in the same saturation, red than orange more sensitive to the visual nerves, Do you remember this picture?

Reference documents:

Analysis of color detection characteristics of human eyes based on chromaticity Zhang Jianyong ... Beijing Polytechnic University ... 2003

"The computer solves the color stimulation the main wavelength and the excited purity" week abundant kun and so on. Changchun Institute of Optics and Fine mechanics ... 1990

Author: Chongsong

Article Source: Xso.name