Welcome to Tencent cloud technology community, get more Tencent mass technology practice dry goods oh ~

Author: ** Zong Wenbo; Think deeply about the details and usage scenarios in the design to create a better user experience. Now I am responsible for the relevant design work of IEG Game Platform Department.

Black and white is the user’s consistent reading habit. In actual usage scenarios, which reading experience is better: white text on a black background or black text on a white background? For our eyes, which kind of collocation will be more comfortable?

In People’s Daily life, most books and web pages are written in black on a white background, which has become a reading habit. But some sites have light fonts on a black background that make the experience feel good and attractive. Then there are some questions: do our eyes prefer black on white or black on white? Which combination is more readable?

To solve this problem, we can discuss it from two aspects: physiological perception and psychological perception

First, physiological perception

To study from the physiological mechanism of human eye. In human vision, light enters the cornea, the cornea bends and enters the pupil, which adjusts and then enters the lens, where it concentrates on the retina and travels to the brain, where it is transformed into the image we see. During this process, there are some unique physiological phenomena that subtly affect our vision.

1. Lateral inhibition

(Side inhibition effect: same color but left square looks darker)

Lateral inhibition refers to the phenomenon that adjacent receptors can inhibit each other, that is, when one neuron is stimulated and excited, the excitation of the latter will inhibit the former. When one receptor is stimulated, the resulting nerve impulse will have a suppressive effect on the input of neighboring regions.

(Because of side inhibition, people often see a brighter band in the bright region and a darker line in the dark region along the boundary between light and dark. This brighter and darker region is called the Mach band effect.)

In general, the main functions of lateral inhibitory network in information preprocessing are as follows:

  • You can highlight the edges and add contrast.
  • The large input range is compressed to the dynamic range of the network itself, which has obvious brightness adaptation effect.
  • It can fit the fine discontinuity of the image and has obvious clustering effect.

Influence: when reading text information, the word you focus on will be the most clear, and other words around this word will be weakened by the visual center. Lateral inhibition is also one of the causes of human visual illusion.

2. Visual adaptation

(Cone-shaped and rod-shaped photoreceptors)

Visual adaptation is the process in which the perception of visual organs changes with the constant stimulation of external brightness. The retina contains cones, which make vision clear in light, and rods, which sense color. The rods allow us to detect low light in dark environments. The mechanism of visual adaptation is the realignment of these cellular and neural activities, which can be divided into dark adaptation and light adaptation.

Dark adaptation: When the light stops or the light passes into darkness, the eyes temporarily lose sight of things. This is when the rod-shaped photoreceptors work, increasing their sensitivity to low light and gradually adapting to the dark environment. (People with impaired rod-shaped photoreceptors are called night blindness, and rod-shaped photoreceptors can’t see colors, so everything looks the same color in the dark!)

Light adaptation: when lighting starts or from a dark environment to a bright one, the sensitivity of the human eye decreases and the eye transitions to a bright vision state. For example, walking out of a movie theater, you start to feel the sun’s glare, but you quickly get back to normal.

Impact: Dark adaptation and light adaptation are the ability of human eyes to respond to environmental light stimuli, but frequent visual adaptation can lead to rapid visual fatigue.

3. Visual afterimage

(Stare at the white area for 30 seconds, then look away to see the image of the white area.)

After the effect of light stimulation on visual organs stops, the excitement of cells does not stop with the termination of stimulation, and sensory phenomena can remain for a short time, which is called visual afterimage. For example, if you look at a light bulb for a few seconds and then look away, you will see the image of a glowing light bulb.

Impact: Strong stimulation can cause excitement of visual organs, produce visual afterimage, and accelerate visual fatigue. According to the above visual phenomena, it can be concluded that:

① Due to the visual phenomenon of lateral inhibition, human eyes can increase the contrast, making black text darker and white text brighter, thus clearly recognizing text.

② Because of the principle of visual adaptation, when we read the information of white characters on black background when the light is sufficient, our vision will focus on the white text, the black background will also be darker, the eyes need to adapt to the dark, so it will accelerate the visual fatigue. On the contrary, at night, the eyes are already in a state of dark adaptation, reading information with white characters on a black background, no visual adaptation is required, and the feeling of fatigue will not increase. So night mode with light words on a dark background at night will reduce irritation and make the eyes more comfortable.

③ When reading the information of white characters on black background, because the lateral inhibition will make the white characters more dazzling and the black background more heavy, browsing the white characters for a long time will produce strong light stimulation, resulting in visual afterimage, resulting in visual fatigue. So even when using white text on a black background, reduce the light stimulation by reducing the contrast, so as to reduce the sense of visual fatigue. However, when reading the information with black characters on a white background, the focused text was black, which did not produce light stimulus and the visual afterimage basically did not appear.

Second, psychological perception

1. Background color properties

(Pictured #000000 black and #FFFFFF white)

Black: Black can be defined as when no visible light enters the visual range (the display is active and black if it does not glow). Black can make other colors brighter and stand out. From the perspective of color psychology, black conveys a sense of elegance, formality, fame and power. A large area of pure black will give a person a sense of seriousness and depression.

White: A color that contains all the colors of light in the spectrum and is generally considered “colorless” and of the highest brightness, the colorless phase (white light produced when three primary colors are combined in a display screen). White is a neutral color, often used as the background color of the page, most of the impression is clean and simple, a large area of white will have a feeling of relaxation, relaxation.

2. Matching effect

(Single line font effect comparison)

Black characters on white background: the overall effect of the traditional black characters on white background is relatively clean and refreshing. When reading, the focus will not fall on the text at the first time. Due to the reflection of the surrounding white area, readers’ attention will wander from time to time. However, due to the phenomenon of lateral inhibition, when focusing on black font without reflected light, the visual stimulation is not strong, so the visual fatigue caused by reading for a long time is weak.

White characters on black background: For the form of white characters on black background, the phenomenon of lateral inhibition will make the focused white characters become more dazzling, and the visual stimulation is strong, which can quickly capture the attention of readers. However, due to the same strong visual stimulation, it will produce a sense of visual fatigue, which is not suitable for long-term reading.

3. Reading habits

(Traditional paper books)

The common text reading habit of users originates from books written in black and white, and this reading habit is a continuation of a long history. This is because the earliest tools used to record information, such as charcoal and ink, were mostly in dark color, while the animal skins and bamboo slips used to carry words were mostly in light color. Later, the use of plant fiber in early papermaking is also light color, so black and white has become a habit of reading accumulated for many years in human history. Moreover, in the current market manufacturing, even if the paper needs to be bleached, the cost is much lower than uniform dyeing.

4. Text readability

(Longer message text)

Jacob Nielsen, one of the most famous pioneers in the field of user experience, has found that “text and backgrounds should have a high-contrast color scheme. Black type on a white background maximizes readability, and white type on a black background has almost the same effect on readability. Although the contrast between the two color schemes is the same, the latter makes text recognition a bit slower. Limited by the color scheme, white text content will appear more slender and fuzzy than black text on white background, and the overall clarity is actually not as good as common black text. This is most obvious with a solid black background and a solid white font.”

From the above aspects, we can draw the following conclusion

(1) Black characters on white background is a human reading habit for a long time. The readability is slightly higher than white characters on black background. When focusing, visual stimulation is weak and fatigue is less.

(2) When reading white characters on black background, focus on white characters, visual stimulation is strong, can quickly attract attention, but at the same time because of visual excitement and easy to produce a sense of fatigue. It is suitable for scenes that require emphasis and draw the reader’s attention.

Third, summary

Through the analysis of physiological perception and psychological perception, it can be found that the use of white characters on black background and black characters on white background is not a relatively isolated problem. Humans have a powerful visual physiology, and can use lateral inhibition to reinforce what they need to read, or visual adaptation to cope with environments with different levels of light. However, strong visual function also corresponds to the corresponding visual burden, so the use of white characters on black background and black characters on white background can be considered according to the following aspects

1. Depending on the type of content to be displayed

Black text on white background is more readable and suitable for long reading; White characters on black are visually stimulating and can attract the eye. Different products hope to achieve different goals, so they should be designed according to product needs.

(A blog site that focuses on text reading)

For example, a deep reading product can use black words on a white background to reduce the fatigue of reading for a long time and enhance the readability of words to create a comfortable reading experience.

(Motorcycle theme station focusing on visual impact)

2. Contrast between text and background

(Display effect of different contrast text on black and white background)

The contrast between background and content is proportional to readability; the greater the contrast, the more readable the message. However, visual stimulation can also be larger, so controlling the appropriate contrast and finding a balance between visual stimulation and readability can make readers more comfortable. For example, even if it is black on white, it rarely uses pure black and white, and most use light color to match dark color, so is white on black.

3. Environmental factors when using the product

Reading books is basically a light environment, because paper books are reflected light, without light can not be seen, white background black letters are also the most suitable for reading. Although electronic products (PC, mobile phone) are screen spontaneous light, but also to consider the impact of ambient light on the screen luminescence.

(Zhihu normal mode and Night mode)

For example, in the night mode of some software, white characters on a black background can be used to avoid frequent changes of users’ eyes from dark adaptation to bright adaptation, so as to achieve the purpose of weakening stimulation and reducing the sense of fatigue.

Finally, for the choice of white characters on black background and black characters on white background, it is necessary to combine clear product purpose, with appropriate contrast and appropriate use scene. The right choice will ensure a clear reading experience that is visually and physically comfortable, so that our eyes will love it! ## Related reading

Deep capture in iPhone photography (WWDC2017-Session 507) OpenGL4.3 Compute Shader To B Service Data analysis series 2: To B service VS To C service

Has been authorized by the author tencent cloud community released, reproduced please indicate the article source The original link: cloud.tencent.com/community/a…