Visual barrier-Free design in UI design _ui

I changed the theme of the blog color, from such a change to this, but I asked the small partner to see the effect he did not find change.

Red-green blindness accounted for about 5% of men in Asia, while women were much smaller. In other words, even if only consider the development of applications for domestic users, this is a large part of the user.

This article will guide us to provide better UI design for more users by understanding color blindness (color blindness) more. No Color blindness simulator

Most people who want to understand the world in color blindness may consider the color blindness Simulator. Search on the Internet "color blindness simulator", or English "color blindness simulator" can get a lot of simulation tools, the general idea is to simulate red, green or blue components to another color component.

For example, the following paragraph (coblis-color blindness Simulator):

Readers can try to choose a photo of their own, for example, I chose the photo of the house I photographed:

After reading a feeling--

However, the simulator will simulate this image. Because it is impossible to find a real simulation of color blindness simulation methods.

Yes-there is no real color blindness simulator, it's just a picture of a normal three-color vision.

So, what is the world in their eyes? can only imagine. Understanding and imagining the world light and color in Color-Blind eyes

The primary school science textbook said, "The light is on the object, the red light shoots into the eye, so we see the object is red", but this is a little reluctant. The wavelength range of human visible light from about 312.30nm to 745.40nm, from the physical glazing has never been the color of the word, can never be physically defined which paragraph belongs to the red, green or cyan. So how does the color come from. --Pure mere human feeling.

▲ Visible Light

And where this feeling comes from. From the stimulation of the cone cells to the treatment of the cerebral cortex, these are important parts of the sensory formation. For cone cells, Wikipedia has a description:

There are three different types of cones in the eyes of the general human eye: the first main feeling of yellow-green, its most sensitive point in about 565 nm, the second main feeling of green, its most sensitive point in about 535 nm, the third main feeling blue purple, its most sensitive point in about 420 nm.

▲ From Wikipedia color

As a result, humans have a variety of different color sensations for all wavelengths of light in the visible light, such as red, yellow, green, and blue. There is no way to prove that everyone has a consistent sense of color, but the four colours listed here are consistent across all cultures throughout the world. This suggests that the three kinds of cone cells that heredity brings to us dominate color perception and understanding. Of course, the color here is actually a wavelength range, in this range of wavelengths, all cultures will think it is red or yellow or green, although some different, but generally it is this color. Although Cyan is also said to be part of the blue in Chinese culture, it does not affect the blurring of these color boundaries.

So, in this paragraph, we will achieve a perception

Three different cone cells determine our perception and recognition of color. We call the three-color vision the color recognition of human beings through three color-sensing cells. Dual-color vision, tri-color vision and four-color vision

Some animals have more kinds of cells that feel the light, such as birds.

▲ From Wikipedia color

In fact, more cells that feel the light are "normal" and "traditional". The main feelings of four different cones are yellow, cyan, blue and violet, and their peaks are 565nm, 508nm, 440nm and 370nm respectively. And these four different cones evolved from reptiles, and in fact most vertebrates are still the four cones, even now.

However, in the process of evolution, mammals lost two kinds--cyan and Violet, leaving only the yellow and blue parts. In other words, most mammals are "color-blind", with only two-color vision. In the process of evolution, the "yellow" part of the primate evolved into two different cone cells, and it became a three-color vision, with the main feeling of yellow, green and blue. In other words, compared to mammals, the primate's Two-color vision, which we call color blindness, is "traditional", and the tri-color vision is a product of genetic mutation. Pay attention to the number of bird and human peak wavelength, four peaks of bird peak wavelength distribution is more average, while the human three peak wavelength of yellow and green very close. This also indirectly illustrates the effect of this mutation.

▲ the human yellow-green and green-sensing peaks are very close, and the four peaks of bird perception are average.

So, in fact, the difference between the red and green is not so big, just because humans in the yellow-green and green wavelength part of the two cones, so the perception of color pull so big. That is, the original difference is not obvious color, by most human exaggerated to red and green such a huge difference. Imagine the world in Color-Blind eyes from an evolutionary perspective

Therefore, the three-color vision of human beings is actually "evolved" from the four-color vision of reptiles to the dual-color vision of mammals, then the gene mutation forms the three-color vision of the primate, in which the perception of yellowish green and green is the same as the mutation of the same gene, which has a small difference in wavelength perception in two parts.

As a result, the red-green blind and most ancestors-mammals looking at green and brown (orange dimming is brown) are close to the two colors. This approach is similar to the way we look at green and slightly longer wavelengths of green. So--the color of the fur of the mammals is actually protective color:

▲ This is just simulation, does not represent the real world in TA's eyes

Then, the accidental mutation of the gene made us abruptly take a slightly longer wavelength of green as a different color. So, at one glance, we saw a little brown hiding in the green bush. What a dazzling color that is. So that the color of the scattered lavender and the color of the surrounding weeds began to appear dim. Even if you do not go through the above protection color, but directly see the image below you are not necessarily aware of the existence of lavender.

▲ Three-color vision of the human species found in the grass used to protect the color of mammals

The above picture comes from the network search, the simulation is generated by the tool. If there is infringement, please contact me. Imagine the world in Color-Blind eyes from the perspective of four-color vision

Now, let's go to the brain hole once more. We have abruptly inserted a new cone-shaped cell and named it "different."

▲ to insert a cone-shaped cell

So he will find that the above ferns and the following Setaria color difference is huge, they can setaria from the grass at a glance, and we humans need a little bit through the shape of the leaf to distinguish slowly.

If the different people think that the ferns are more delicious, setaria eat nausea, then they can through the color of the grass from the pile of grass to identify these two kinds of grasses. And then the other day, when the whims of the human eye of our tri-color vision were to be looked at, what kind of color did they simulate in their new perceptual colours? Simulate the color of fern plants. The bushes in their eyes were delicious sweet colors, even the disgusting setaria they were able to watch comfortably. Simulate Setaria color. The grass in their eyes was so disgusting that they could bear it all day long. Simulate the middle color. --that looks like there's no grass at all, it's ugly. Ugly dead. A face to dislike. Visual barrier-Free design in UI design

As a three-color vision of programmers and designers, we have just imagined a two-color world of color blindness, and by the four-color vision of the different people forced to see the shape of the leaves to look for grass experience when the feeling of color blindness. So, we know how to take care of their feelings, and consider that 5% of users to make better UI design. Security color

When there are multiple color schemes available, we can pick out colors that are color-blind and friendly.

Of course we do not expect to be able to take care of all the color blind groups, because there is no need to use color, more than 99% of users will be no color available, but this is too low price. But we can try to take care of the red-green blind group, because this is the highest proportion of color blind people, the rest of the population is very low, we will consider the use of non-color elements to achieve barrier-free design.

So, how to pick it.

The red part can be unchanged, the green part can be considered as the blue part offset, just like the current traffic light design. Color blind people are exposed to less information, which makes the color differences more pronounced.

In the team's UI design, it is recommended that some product standard colors be tested by a color blindness simulator. Use these standard colors thereafter. Non-color auxiliary elements

If some UI elements are only distinguished by color, then the UI for color blindness will be very difficult to use.

For example, here's how to validate a mathematical formula:

▲ Red represents error, green represents edit

If you simulate with an emulator, you get this image:

▲ Color blindness Simulator simulation of input box validation 1

▲ Color blindness Simulator simulation of input box validation 2

In other words, finding the wrong formula will be as difficult as the one we identified from the grass in front of the Setaria.

But if we add a bit of symbolic display, or put a word hint next to the formula (one of them is enough), the problem can be solved immediately. Like this:

Then, you can clearly find the wrong formula:

▲ Color blindness Simulator simulation of input box validation 1

▲ Color blindness Simulator simulation of input box validation 2

In addition, I have previously labeled the wavelength points of humans, birds and other people as symbols rather than colors. When making charts, you should usually consider using symbols instead of colors. Some tools are recommended to manually check the interface for barrier-free design

At the beginning of this article, we said that color blindness simulators do not simulate the world in color blindness, but we can use these simulators to assess whether our UI designs can be used with color blind people without hindrance. Toptal color blind Filter coblis-color blindness Simulator-colblindor Reference and reference color-Wikipedia, the free encyclopedia of colors-Wikipedia, free encyclopedia why not Green Fur-colored mammals. -the answer to the town-what the world looks like in a red-green blind eye. -Barrier-Free design: Take one more step for color-blind users