Inclusive Design: Ensuring Web Accessibility for Color Blindness!

By: Skynet Technologies USA LLC
8 mins
500
Web Accessibility for Color Blindness

Among myriad physical disabilities people suffer from, color blindness is one of the most found issues. It is a condition in which individuals cannot perceive colors. 有色盲问题的人很难区分某些特定的颜色,因此, they see colors differently than others. 主要有四种类型的色盲:红绿、蓝黄、红黑和完全色盲.

Therefore, while designing websites under web accessibility best practices, 坚持定义的颜色指南(由WCAG)可以使色盲用户访问网站. 在线信息的可访问性达到了色盲用户与其他用户体验的相似本质.

Not only web accessibility best practices but some tools and techniques can also help designers create accessible websites; let’s learn more.

Certain types of companies including Government agencies, educational institutions, healthcare providers, banks, insurance companies, ecommerce platforms, technology companies, 公共服务机构由于其服务的性质,更有可能在其网站上要求色盲无障碍功能, regulatory requirements, and the diversity of their user base.

Color blindness and its types – detailed information!

As mentioned above, 色盲是一种无法看到和识别某些颜色或感知颜色差异的残疾. 奇怪的是,世界上有这个问题的男性比女性多. According to the American Academy of Ophthalmology, around 0.5% women and 8% men complained color blindness in the United States.

In some cases, it is not a problem of concern, but a few people have severe issues recognizing colors.

Red-Green color blindness

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

red green color blindness

Blue-Yellow color blindness

People who suffer from blue-yellow color blindness, cannot discern blue color and sometimes, they even find it difficult to differentiate between yellow and blue colors. The situation is called Tritanopia.

blue yellow color blindness

Red-Black color blindness

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

Complete color blindness

Complete color blindness is also called Achromatopsia. This situation is rare. 这种只能看到灰色而看不到其他颜色的人是Achromatopsia.

complete color blindness

Web designing practices to remove accessibility barriers for color-blind people!

According to W3C WCAG standards for color blindness:

  • Color should not be the only medium to convey information or prompt responses.
  • 对于文本的视觉呈现和文本的图像,有一个定义的颜色对比度(4).5:1).

Other practices to follow:

  • Patterns and textures can help in making the charts and diagrams comprehensive!

    如果网页上的图形和饼状图包含显示不同数据信息的颜色, some users face difficulty in understanding such data.

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

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

    As written above, to adhere to W3C compliance standards, 仅仅依靠颜色来传达任何类型的信息是不允许的.

    Thus, for an appropriate web design, try using symbols or text with colors to convey messages correctly.

  • Avoid a few color combinations!

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

    Green-red, green-blue, green-brown, green-black, green-grey, blue-grey, light green-yellow, blue purple.

  • Important buttons must stand out!

    If a web design relies on colors to differentiate buttons, it will be problematic for users with color blindness.

    Thus, instead of using only colors to display buttons, increase the size of a primary button, increase contrast between the primary and secondary buttons, and use borders and icons to let users know which one is the primary button.

  • Don’t forget to underline the links!

    Often, links (anchor text) in between content are shown using colors, which is troublesome for people suffering from deuteranomaly, protanopia, and tritanopia to differentiate between normal text and anchor text.

    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. If they don’t hover over the text, they might miss that link.

    Thus, underlining the text links makes them easily accessible.

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

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

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

色盲功能可以帮助用户根据自己的色盲缺陷改变网页的颜色设置. The widget covers various color blindness settings such as:

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

此功能可在All in One Accessibility小部件的付费版本中使用. To learn more about the color blindness feature and other features as well, go to its feature page.

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

Color blindness is already a problematic condition for many, and inaccessible online content adds another problem to those users. Thus, to make people's lives easier, 促进网站的可访问性是每个组织的道德和法律责任. 本文将帮助您手动或通过集成外部小部件来实现可访问性目标.

Use our free WCAG web accessibility color contrast checker 检查你网站的颜色组合是否符合WCAG A、AA和AAA的要求.

59