WebAIM - Web Accessibility In Mind

Visual Disabilities
Color-blindness

Types of Color-blindness

Several coloring crayons displayed without colorColor-blindness or color vision deficiency is the inability to distinguish certain shades of color. It is a fascinating topic because of its complexity. There are three types of photoreceptors within the eye. Each is responsible for detecting different color wavelengths. Additionally, there are photoreceptors that detect light intensity, called rods. Color-blindness can occur if any of these types of photoreceptors is missing or functioning incorrectly. The most common type of color-blindness is red-green deficiency—this doesn't mean that red and/or green cannot be seen, but that certain shades of red and green may be difficult to differentiate.

Important

The key principle of web accessibility for users with color-blindness is:

  1. Perceivable:某些颜色组合之间的差异可能难以感知。

The colors with which they have difficulty distinguishing depend upon their type of color-blindness, but red-green deficiencies are the most common.

Red-green deficiencies

Individuals with a red-green deficiency have difficulty distinguishing between some shades of reds and greens, but they can still differentiate between a light color and a dark color. A dark red and a light green will be easy to distinguish because of their contrast difference. People with red-green color-blindness may see reds and greens as yellows, oranges, and beiges. This means that yellows, oranges, and beiges can be confused with greens and reds. Blue is not affected by this type of color blindness.

Protanopia and protanomaly (red deficiencies)

Protanopia and protanomaly occur when the cones in the eye primarily responsible for detecting red are missing or malfunctioning. The greens tend to look similar to the reds. Protanomaly is milder than protanopia, but the result is similar. Many people with protanomaly can distinguish some reds and greens with some difficulty, and, as with protanopia, reds tend to look darker as well.

Experience it for yourself

Normal
drawing with reds, blues, greens, and yellows

Protanopia
same drawing, with indistinguishable reds and greens, with reds that are slightly darker in contrast than in the original

氘博尼亚和氘核症(绿色缺陷)

当主要负责检测绿色的锥体缺失或出现故障时,氘障碍发生,但最终结果与protanopia非常相似,但红色不会出现黑暗。氘化植物是两个条件的严重。具有氘核患者的个体通常可以比较准确地区分红色和绿色的色调。

Experience it for yourself

Normal
drawing with reds, blues, greens, and yellows

Deuteranopia
same drawing with indistinguishable reds and greens

其他缺陷

Tritanopia和Tritanomaly(蓝缺乏症)

Titanopia.and tritanomaly are much less common than the other types. Tritanopia is when the cones primarily responsible for detecting blue are missing or malfunctioning. Blues and greens may appear very similar, and yellows may appear as lighter shades of red or may seem to disappear completely.

Experience it for yourself

Normal
drawing with reds, blues, greens, and yellows

Titanopia.
用蓝色和蔬菜难以区分的同样的绘图

Rod monochromacy or achromacy (no color)

This group constitutes an extremely small minority among people who are color-blind. All three types of cones or either missing or non-functional, so the rods (the photoreceptors which can only differentiate between light and dark) are the only available source of visual information. Individuals with achromacy see the world as if in grayscale—everything will appear in black, white, and shades of gray. This often results in poor visual acuity and an aversion to bright light.

The term "color-blindness" is most true for this type of deficiency, since these individuals entirely lack the ability to see any color, whereas the color-deficiency is most accurate when people only lack part of the color spectrum.

Experience it for yourself

Normal
drawing with reds, blues, greens, and yellows

Achromacy
same drawing, but without any color, and the image itself is blurrier and lighter

Designing for Color-blindness

When designing web content it is not necessary to get rid of color. It is not necessary to convert all images to black and white or get rid of images entirely. In fact, it may not be necessary to change anything at all.

Important

Make sure that colors are not the only method of conveying important information.

Most of the time color is irrelevant in understanding content on the web. However, when colors are used to convey or differentiate information—such as a pie chart or bar graph, or using green and red text to indicate pass/fail or good/bad, etc.—this information should also be provided in another way.

例如,下面的图像显示了纽约市公共交通系统的一部分,其中路线通过线的颜色来区分。

运输地图显示了站点之间的不同站点和路线。站之间的线路是不同的颜色,其对应于不同的路由。

删除颜色信息时,路线很难区分。

相同的交通地图显示不同的站转车ns and routes between the stations, but color information has been removed.

在使用颜色增强用户体验时,当颜色可能不被感知(包括盲目的用户)时,通过自定义设置覆盖,或者不容易区分该信息,需要使用不同的样式来计算图像来传达这些信息对于每一行,或通过在网页上的文本中添加图像,该图片传达相同信息。