在无数的身体残疾中，人们遭受着, 色盲是最常见的问题之一. 这是一种个体无法感知颜色的状态. People with color blindness issue have difficulty distinguishing between some specific hues and thus, 他们看到的颜色和其他人不一样. Mainly, there are four types of color blindness: red-green, blue-yellow, red-black, and complete.
Therefore, 在设计网站时遵循网页可访问性最佳实践, adhering to the defined color guidelines (by WCAG) makes websites accessible for color-blind users. And the accessible online information reaches to color-blind users with the similar essence that other users experience.
Not only web accessibility best practices but some tools and techniques can also help designers create accessible websites; let’s learn more.
某些类型的公司，包括政府机构, 教育机构, healthcare providers, banks, insurance companies, ecommerce platforms, technology companies, and public service organizations are more likely to require color blindness accessibility features on their websites due to the nature of their services, regulatory requirements, 以及他们用户基础的多样性.
色盲及其类型-详细信息!
As mentioned above, color blindness is a disability to see and identify certain colors or perceive color differences. Strangely, more males across the world are suffering from this issue than females. 根据美国眼科学会(American Academy of Ophthalmology)的数据，大约是0.在美国，5%的女性和8%的男性抱怨自己是色盲.
In some cases, 这不是一个值得关注的问题, 但有些人在识别颜色方面有严重的问题.
红绿色盲
这是最常见的色盲之一，包括两种亚型. One is Deuteranopia and the other one is Protanopia. People who cannot see red color suffer from Protanopia and those who have Deuteranopia, 不能感知绿色. Moreover, in both conditions, people face problems in distinguishing between red and green colors.
蓝黄色盲
患有蓝黄色盲的人, 有时无法辨别蓝色和蓝色, 他们甚至发现很难区分黄色和蓝色. The situation is called Tritanopia.
红黑色盲
红黑色盲 is very less, mostly people face above two colors blindness. 在这种类型的色盲, if red and black colors are kept together then people will not be able to differentiate between them. Thus, web pages with a black background and red text are problematic for such users.
完全色盲
完全色盲也叫色盲 Achromatopsia. This situation is rare. Such people who cannot see any color but only grey in place of different colors have Achromatopsia.
为色盲人士消除无障碍障碍的网页设计实践!
根据W3C WCAG色盲标准:
- 颜色不应该是传达信息或迅速回应的唯一媒介.
- There is a defined color contrast ratio for the visual presentation of text and images of text (4.5:1).
其他可遵循的做法:
图案和纹理有助于使图表更加全面!
If graphs and pie charts on web pages contain colors to show different data information, 一些用户在理解这些数据时遇到困难.
Using patterns and textures instead of colors makes graphs or pie charts simple to understand. Also, labeling each section can help create an understandable chart irrespective of the colors used to denote a specific section in that visual representation.
Using relevant symbols makes accessible forms or log-in fields for color-blind users!
As written above, 遵循W3C遵从性标准, depending solely on colors to communicate any sort of message or information is not allowed.
Thus, 对于一个合适的网页设计, 尝试使用带有颜色的符号或文字来正确地传达信息.
避免一些颜色组合!
Some color combinations trouble people with color blindness and even users who have vision issues. Thus, choosing the right color combinations for web design is a crucial aspect to bring accessibility for everyone. A few defined combinations of colors directly affect visibility and readability for users with visual impairments:
Green-red, green-blue, green-brown, green-black, green-grey, blue-grey, light green-yellow, blue purple.
重要的按钮必须突出!
如果一个网页设计依靠颜色来区分按钮, 这对色盲的用户来说是有问题的.
Thus, 而不是只用颜色来显示按钮, 增加主按钮的大小, 增加主要和次要按钮之间的对比, 使用边框和图标让用户知道哪个是主按钮.
不要忘记在链接上画下划线!
Often, 内容之间的链接(锚文本)使用颜色显示, 对于患有子宫畸形的人来说，哪一点是麻烦的, protanopia, 以及三色盲来区分正常文本和锚文本.
Users with achromatopsia would not be able to understand the normal text and anchor text at all; hovering above the text will be the only option for them. 如果他们不将鼠标悬停在文本上，他们可能会错过该链接.
因此，在文本链接上加下划线使它们更容易被访问.
Tools or third-party software to improve accessibility in websites for color-blind users!
The best web practices are always suggested to adhere to in order to offer accessible websites to color-blind users. Besides, there are third-party widgets / extensions / software that help bring accessibility in just a few clicks.
All in One Accessibility has several features to achieve accessibility goals for various disabilities and one of the features is including color blindness. Ensure your website is accessible to everyone, including those with color blindness.
The color blindness feature helps users to change web page colors setting according to their color blindness deficiency. 这个小部件涵盖了各种色盲设置，例如:
- Protanomaly
- Deuteranomaly
- Tritanomaly
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatomaly
- Achromatopsia
This feature is available with the paid version of the All in One Accessibility widget. 为了了解更多关于色盲的特征和其他特征， go to its feature page.
Accessible Web Design is important for color blindness to improve digital inclusion!
对许多人来说，色盲已经是一个问题, 而无法访问的在线内容给这些用户带来了另一个问题. Thus, 让人们的生活更轻松, promoting web accessibility is every organization’s moral and legal responsibility. This article will help achieve accessibility goals manually or by integrating external widgets.
Use our 免费的WCAG网页无障碍色彩对比检查器 to check your website's color combinations against WCAG A, AA, and AAA requirements.
