Robert Hess
Published on October 9, 2000
Archive in November 13, 2000
I discussed the problems related to color in the first few articles. Some readers also hope that I can talk about how to choose color on the Web site to enable color-blind patients to see correctly. Based on these requirements, I have studied the subject, I hope that the information I offer can help you better recognize this problem, but also help build a more readable Web site.
First, we have to figure out the exact meaning of color blindness. "Color blind" does not mean that the color blind patient can not see the color, or what you see is black and white. Also use another term, color impairment, more exact.
Colorful world
We are through the eyes, or more specifically, we recognize the colors through the "cone cells" in the eyes. We have learned in schools, and there are side cells and cone cells in the eyes, they all have photosensitive. Dending the rod and the cone passing the light to the brain, generating images in the brain, let us see the surroundings.
Figure 1. Normal color
I am going to spend some time to discuss the lever cells and cone cells; if you are eager to enter the topic, you can skip this part, directly view the solution.
The number of denser cells is far more than cone cells, which are more sensitive to the brightness difference between the intermediate portion of the spectra. If you only look at the cell cell, you can only see black and white images. The cone cells in the eyes provide us with color. Cones can be divided into three types:
L Cones (long wave) is mainly sensitive to the red moiety of the spectrum. M cone cells (medium waves) are more sensitive to the green part. S cone cells (short waves) are more sensitive to the blue part.
Although the scope of the visible spectrum is substantially equal, the photosensitance of the l cone, the M cone and the S cone is different, especially the L cone is not strictly concentrated in the spectrum. area. Fortunately, the cone on the spectral photosensitivity is only part of the brain on the color information decoding process, and other processing processes will take into account the differences in photosensitivity.
Figure 2. Three white curves indicate the photosensitive level of three types of cones. The black curve indicates the photosensitiveness of the desert rod. Dowling, John E. (1987); The Retina: An Approachable Part of The Brainbelknap Pr; ISBN: 0674766806
Houston, we have trouble.
If the function of a certain class or a few of the cone cells is reduced to normal level, or if it is completely lost, the color will have problems. Since the genes affecting the hurts belong to X chromosomes, the chances of male suffering from detrimental obstacles are much larger than women. Among me, about 8% have some form of color impairment, and only about 0.5% of women have this problem.
The names of all kinds of color obstacles are listed below. I have an example color ring and a color plate for each category. I can't find more practical information about the identification of color obstacles on color, but these seem to be a recognized spectral representation. After reading these pictures, you may feel doubt, why not lack "red", "green" or "blue"? There are two reasons. First, as shown in the figure above, the actual photosensitive range of the cone is not directly concentrated in a particular area of the spectrum. The second reason involves further processing of the internal brain. This processing is actually linked to the sensing of the color and image and the pavement / cone, making the color of the patient's finally seen the colors close closer to the actual color.
Red blind: about 1% of men suffer from such color impairment. Red blindness means that it is not recognized, and it is called red color. It is the result of the locular loss function. L The cone allows us to identify the red portion in the visible spectrum. Since the red is located at one end of the visible spectrum, the photographic range of the L cone is only partially overlapping with the photosensitive range of the other two kinds of cones, so the red blind patient significantly lost the recognition ability of light at one end of the spectrum. Red weak: about 1% of men suffer from such color impairment. Red weakness refers to a weak recognition ability to red. When the function of the l cone has not been completely lost, it cannot be kept in the case of its original functional level. Green blind: about 1.1% of men suffer from such color obstacles. Green blind means that you cannot identify green, also referred to as green color. It is the result of the M cone loss function. The M cone allows us to identify the green part in the visible spectrum. Due to the position of the light in the spectrum, the actual overlap between the ME (green) and the L cone (red), and part overlap between the S cone (blue), green blind patients The sensitivity level of the entire spectrum is basically normal, but still confuses individual colors. Green is weak: about 4.9% of men suffer from such color impairment. Green is weak, refers to weaker the ability to recognize green. When the function of the M cone has not been completely lost, it will not be able to maintain its original functional level, there will be green weakness. Blind: about 0.001% of men suffer from such color impairment. Blue blindness means that it is impossible to identify blue, also referred to as blue color. Blue blindness is most rare in all kinds of color obstacles. It is the result of the S cone loss function, and the S cone allows us to identify the blue portion in the visible spectrum. Since the blue is located in the other end relative to the red in the spectrum, and the S-cone is smaller than the other two types of cones, the blue blind patients have a great influence on the photosensitive capabilities of the entire spectrum. Blue weak: refers to the weak recognition ability of blue, but it seems to have never had a case record in such a color impairment. The reason may be, from general, the S cone is only 10% of the total number of people in the eyes of the human eye; when there is obvious abnormal abnormality, this kind of cone has lost its function. Note: The palette of the above color example is fabricated from the following sites: http://www.labs.bt.com/people/rigdence/colours/colours1.html.
Find solutions
After reading the color in the above palette, you can understand the reason why people who have some kind of color obstacles can not see the reasons for your site. Although you have spent a lot when you choose color for your site. strength.
The following detailed examples are explained below. Suppose you face the following:
Click the green button to continue. To help, click the Yellow button. To quit, click the red button.
It looks very simple, right? But what if the color you see is as shown below, what is the situation?
or
or
I sincerely hope that this situation will not appear on the Web site. With the tag definition button is easier, such as "Continue", "Help", "Exit"; this can even reduce the occupied page space. However, this is true, but not only on the Web site, it also happens in real life.
The method of solving this problem is to avoid using the color to indicate the operation requiring the user or the information you want to pass to the user. Instead, the color should only be used as a general prompt to the user.
Color contrast
As mentioned in the articles mentioned in the art, an important factor that needs to be considered when choosing color is to have a strong comparison between the foreground and background colors, which can be easily read. This will be more important if you take into account the patient's patients.
Take a look at the collar given above, then look at the normal color ring at the top of this page.
You will find that the color of the user who can identify the user with a variety of users is much less than the normal user. Moreover, many adjacent colors on the collar look actually the same. In order to understand what kind of impact on your site design, let's look at a color example: Yes, I know that this color match is not suitable, but you can see such a color combination on many sites. You may feel that these colors are too bright, but if you are a normal person, you can still read the information displayed. But what is the user who suffers from a variety of obstacles?
Some people may say that as long as the color is matched to the grayscale when the color palette falls to the grayscale, this color match is suitable for a variety of patients. But I think this statement is not completely correct. Let us drop the palette used by this image to the grayscale, then look at its display.
You may think that although this color scheme is quite bad, it should be safe for patients with eclipse disorders. As so than? Let's take a closer look. This time, we use a palette that is closer to the color obstacles to see color:
Red blind:
Green blind:
Blue blind:
It seems that the blue blind patient is lucky in this case. I think the color they see is more distinct than the color of the normal person. But you can also see that the image looks not bad when using the grayscale palette display, but for many users with a variety of obstacles, this color combination is not safe.
If the correct color matching is performed, the designer will never choose this special color scheme. They will choose to compare stronger colors, making information more suitable for reading. But how do you need to use this "yellow-green" color combination, what measures can you take for some reason? We have already introduced in the previous article, making a color darker, while making another color, can increase the contrast between the two, so we can try to keep the color of the color constant, and change Its brightness and saturation increase its contrast:
normal:
Red blind:
Green blind:
Blue blind:
This color match is still not very good, but it is much better than the original color combination. Although only some changes were made slightly, patients with ejaculation obstacles were fully able to read the text on the page, while maintaining the basic intentions of the original color match.
If you have a drawing program that can extract a palette from the image file, you can use the "Close Color" and "Keep Metrics" method to apply the palette (such as the Paintshop Pro), you can use The following images check your own color match. "Normal" image represents 216 colors of safety palettes (English); other images remain the same indicator, but the color changes, representing the colors seen by patients with various types of color impairments.
normal:
Red blind:
Green blind:
Blue blind:
After saving the palettes of these images, follow these steps to test your own images:
Use the Print Screen to capture the screen snapshot of the color scheme. Paste this image to the image tool. Use the "nearest color" method to apply the "ordinary" palette. Use the "Keep Indicators" method to apply the colorile disorder palette.
Note that many plot programs may all support usage and processing palettes, but do not necessarily provide options for keeping color indicators when importing palettes. If you cannot determine if your application has this feature, ask the manufacturer or other user of the software.
Color matching to complement
As shown in the above example, it is often very difficult to choose the color that is suitable for all users. Moreover, since the degree of color impairment of different users is different (this will result in greater color differences), making this problem more complicated. It should also be considered that the user does not properly adjust the display. If the display is not adjusted, the contrast is too low, even if the user visually normal is difficult to identify certain colors. For all of these factors, it is not only important to choose the right color, but also difficult. When you select the color of the web site, you can also give the user to specify the color displayed on the web page. This is not as difficult as it sounds. The concept of "user style sheet" is included in the cascade style sheet, which can specify its own style, cover the style of the Web designer's original use. However, this style sheet is constructed to build a difficulty in general users, and may also unexpectedly disappear the layout of the web page.
A relatively simple method is to display different UI components using the colors selected by the user for the Windows operating system. Using the Display Settings Control panel program, users can adjust the display color to view and use Windows applications. If you use the same color scheme, your Web site should be safe. But this method also has a deficiency, it does not apply to all browsers. Currently, only Microsoft Internet Explorer uses these keywords.
To use the system color, you only need to use the appropriate keyword instead of color value. For example, not using:
But use:
This will make your font color are the same as the WINDOWS operating system text selected by the user.
The keywords available below are listed below. The first list contains a keyword corresponding to the appropriate "text" and "background" color combination.
Foreground Background appropriately combined and InfoBackground captiontext highlight infobackground InfoText activecaption CaptionText combinations and compositions inactivecaptiontext inactivecaption InactiveCaptionText ActiveCaption and buttontext buttonface ButtonText ButtonFace compositions and combinations windowtext window WindowText InactiveCaption and Window combination highlighttext HighlightText and Highlight menutext menu MenuText compositions and combinations infotext Menu
The colors listed below have no comparison colors that match it. They are not suitable for use as a background color or text color, but should be used as a color representative of its name.
Mismatched colors: buttonhighlightbuttonshadowthreedfacethreedhighlightthreedlightshadowthreedshadowthreeddarkshadowtextappworkspacebackgroundactiveborderinactiveborderwindowframescrollbar
I have modified the dynamic HTML tools introduced in the previous article to transform them into a new version to provide you with a palette of a variety of system colors. If you are interested in using these system colors in color schemes, you can use it as a reference.
Although it seems that all of this needs to be careful, the most important is to consider the content to provide users and make sure they can really see these content. This is not just that the choice of beautiful color combination is so simple, and it is necessary to consider that visual differences have some impact on our people.
For more information on design colors for patients with color impairment, see the following link: Microsoft Accessibility Web Site (English) This site contains information provided by Microsoft to how to make applications more suitable for use in all kinds of disabled patients. It also provides information about the auxiliary feature that Microsoft will add in its operating system and applications. But can they see? (English) In this article, Microsoft Accessibility Director GREG LOWNEY describes the various functions played in the application design, as well as how developers can ensure that patients with different types of visual obstacles can use them. Application method. Safety Web Color in Slim Accession (English) This is a very good article, the interactive design expert in BT laboratory Christine Rigden introduced her research results in designing Web in color blind users. Effective Color Contrast (English) Lighthouse International Vice President ARIES ARDITI, ARIES ARDITI, how effective choice is almost suitable for each of the colors, which also includes many sample images.
MSDN Show is hosted by Robert HESS.
Archive More or Hess column
