59

包容性设计:确保色盲的网页可访问性!

By: 天网科技美国有限责任公司
8 mins
色盲的网页可访问性

在无数的身体残疾中,人们遭受着, 色盲是最常见的问题之一. 这是一种个体无法感知颜色的状态. 有色盲问题的人很难区分某些特定的颜色,因此, 他们看到的颜色和其他人不一样. 主要有四种类型的色盲:红绿、蓝黄、红黑和完全色盲.

Therefore, 在设计网站时遵循网页可访问性最佳实践, 坚持定义的颜色指南(由WCAG)可以使色盲用户访问网站. 在线信息的可访问性达到了色盲用户与其他用户体验的相似本质.

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, 公共服务机构由于其服务的性质,更有可能在其网站上要求色盲无障碍功能, regulatory requirements, 以及他们用户基础的多样性.

色盲及其类型-详细信息!

As mentioned above, 色盲是一种无法看到和识别某些颜色或感知颜色差异的残疾. 奇怪的是,世界上有这个问题的男性比女性多. 根据美国眼科学会(American Academy of Ophthalmology)的数据,大约是0.在美国,5%的女性和8%的男性抱怨自己是色盲.

In some cases, 这不是一个值得关注的问题, 但有些人在识别颜色方面有严重的问题.

红绿色盲

这是最常见的色盲之一,包括两种亚型. One is Deuteranopia and the other one is Protanopia. 看不见红色的人患有红色盲和绿色盲, 不能感知绿色. 此外,在这两种情况下,人们都面临着区分红色和绿色的问题.

红绿色盲

蓝黄色盲

患有蓝黄色盲的人, 有时无法辨别蓝色和蓝色, 他们甚至发现很难区分黄色和蓝色. The situation is called Tritanopia.

蓝黄色盲

红黑色盲

红黑色盲的人很少,大部分人脸以上两种色盲. 在这种类型的色盲, 如果红色和黑色混在一起,人们将无法区分它们. 因此,黑色背景和红色文本的网页对这些用户来说是有问题的.

完全色盲

完全色盲也叫色盲 Achromatopsia. This situation is rare. 这种只能看到灰色而看不到其他颜色的人是Achromatopsia.

完全色盲

为色盲人士消除无障碍障碍的网页设计实践!

根据W3C WCAG色盲标准:

  • 颜色不应该是传达信息或迅速回应的唯一媒介.
  • 对于文本的视觉呈现和文本的图像,有一个定义的颜色对比度(4).5:1).

其他可遵循的做法:

  • 图案和纹理有助于使图表更加全面!

    如果网页上的图形和饼状图包含显示不同数据信息的颜色, 一些用户在理解这些数据时遇到困难.

    使用图案和纹理代替颜色使图形或饼状图易于理解. Also, 标记每个部分可以帮助创建一个易于理解的图表,而不考虑在视觉表示中用于表示特定部分的颜色.

  • 使用相关的符号使色盲用户可以访问表单或登录字段!

    As written above, 遵循W3C遵从性标准, 仅仅依靠颜色来传达任何类型的信息是不允许的.

    Thus, 对于一个合适的网页设计, 尝试使用带有颜色的符号或文字来正确地传达信息.

  • 避免一些颜色组合!

    一些颜色组合会困扰色盲患者,甚至是有视力问题的用户. Thus, 为网页设计选择正确的颜色组合是为每个人带来可访问性的关键方面. 一些定义的颜色组合直接影响视觉障碍用户的可见性和可读性:

    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. 如果他们不将鼠标悬停在文本上,他们可能会错过该链接.

    因此,在文本链接上加下划线使它们更容易被访问.

工具或第三方软件,以提高网站对色盲用户的可访问性!

为了向色盲用户提供可访问的网站,总是建议坚持最佳的网络实践. Besides, 有一些第三方的小部件/扩展/软件可以帮助你在几次点击中实现可访问性.

All in One辅助功能 有几个功能来实现各种残疾的可访问性目标,其中一个功能包括色盲. 确保每个人都能访问你的网站,包括那些色盲.

色盲功能可以帮助用户根据自己的色盲缺陷改变网页的颜色设置. 这个小部件涵盖了各种色盲设置,例如:

  • Protanomaly
  • Deuteranomaly
  • Tritanomaly
  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatomaly
  • Achromatopsia

此功能可在All in One辅助功能小部件的付费版本中使用. 为了了解更多关于色盲的特征和其他特征, go to its feature page.

无障碍网页设计对于色盲提高数字包容性非常重要!

对许多人来说,色盲已经是一个问题, 而无法访问的在线内容给这些用户带来了另一个问题. Thus, 让人们的生活更轻松, 促进网站的可访问性是每个组织的道德和法律责任. 本文将帮助您手动或通过集成外部小部件来实现可访问性目标.

Use our 免费的WCAG网页无障碍色彩对比检查器 检查你网站的颜色组合是否符合WCAG A、AA和AAA的要求.