Analysis of text color and readability

I. Saturation and readability:
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 arousal:
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, purple;
2. Prohibit the use of high saturation of red, purple;
3. Use a small amount of high saturation yellow, blue.

Three. On the relationship between lightness, hue, and saturation.
1. Noun explanation:
A) First said the degree: is the intensity, also has called the brightness, the computer divides the brightness into 256 levels, the black Dark is the 0 level, the white one what all cannot see is 255 level:

B Again, Hue: is usually said what kind of color, the spectrum of red, orange, cyan Violet, and thousands of combinations are different hue.

C) Finally say saturation: it is usually said that the color purity, brightness and so on.
2. Relationship with Red,green,blue monochromatic light:
A The first is to find out some rules of color generation in the computer:
I.rgb three primary colors and mixing 1:1:1 proportions to produce 1 white light;
Ii. Any of two primary colors in RGB, mixing can only produce another hue of the light, not the white light;
Iii. any one of the primary colors of the light, the value of the degree of brightness of the effect of the half of its values, the conversion of the color order will not exceed 127;
because any two colors that are mixed with a light color, No more than 255 levels of color is white light.
For example #000002 blue picture, in its blue channel level is 2 levels, but converts it to the grayscale picture, the color value is #010101, explained this picture the brightness color level is 1.
Iv. the RGB values mentioned below refer to the color channel hexadecimal values:

B) lightness is related to the minimum value in RGB, the maximum value, and the calculation method is as follows:

The smaller the maximum value of the I.RGB, the less the light, the lower the lightness;
Ii. The smaller the minimum value in RGB, the less white light generated, the lower the value
C) in the same lightness, the hue and the maximum value in RGB, the position of the minimum value, and the size of the median:

I. In the same brightness, the RGB maximum and minimum values of different hue are always constant;
Ii. The position of the maximum and minimum values in RGB affects the hue, such as #775533 and #557733; the intermediate values of the
Iii. transform RGB can affect the hue, such as #ff0055 and #ff0088;
D) saturation and the maximum value in RGB, the difference between the minimum values: The maximum value in the

I.rgb, the greater the difference between the minimum value, the higher the saturation; 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 value to FF), increase the degree of 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 value of 00), increasing the brightness can reduce fulland degree of purpose, reduce lightness but will increase the saturation;
3. The greater the color saturation (i.e. the greater the maximum and minimum difference in RGB), the larger the spectral range in the same lightness (the less color you can transform);
4. The smaller the color saturation (that is, the smaller the difference between the maximum and minimum values in RGB), The smaller the spectral range in the same lightness (the less color you can transform);
5. The change of Hue does not affect the brightness 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 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, Remember this picture?

References:
Analysis of color detection characteristics of human eyes based on chromaticity Zhang Jianyong ... Beijing Polytechnic University ... http://www.aliyun.com/zixun/aggregation/19058.html ">2003 year
"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

Source: http://www.xso.name/blog/2010/06/text-color/