利用色彩理论来提高网站的可访问性

利用色彩理论来提高网站的可访问性

有大量的文章和指南色彩理论以及它对每个网页设计师的重要性。色彩在设计中非常重要,在很多情况下甚至会影响人们的行为。因此,网页设计师通常会检查他们的网站颜色是否适合整个网站的风格,并为用户创造良好的印象。

但专注于标准色彩理论的网页设计师往往忽略了一点。有一小部分人对颜色有不同的看法。他们的视力细节不允许这些人以其他人的方式看到特定的颜色。你美丽的网站与五颜六色的口音可能根本不适合那些人。由于色盲影响6%到8%的男性和不到1%的女性,你可能会失去大量的潜在客户。

用颜色理论提高网站的可访问性

为什么可以呢?

注意网站的可访问性在色彩组合方面给你很多好处。你仍然可以用一个优秀的调色板做出一个漂亮的网站,但你也可以取悦很多有视觉障碍的人,他们现在可以访问你的网站的大部分功能。这里有更多的理由让你选择无障碍网站设计:

  • 它可以让你在商业竞争对手之前获得优势。如果你的网站是色盲友好的,而你的竞争对手不是,你可能赢得战斗,从这类人获得更多的重复流量。
  • 可访问的网站在搜索引擎中的排名可能更高。
  • 不可访问的网站可能会遇到法律问题,因为它们没有为视觉(和其他)残疾的人提供平等的机会。
  • 伦理方面也很重要。有视觉障碍的人不能完全使用不可访问的网站。这很让人沮丧,也很伤害用户体验。

尽管你可能会感到恐惧,但为色盲人群提供一个无障碍的网站并不是一件难事。事实上,有时创建一个不可访问的网站会更加困难。通过合理的规划,巧妙地运用色彩理论和色彩对比,你可以创建一个非常酷的网站,用户体验也很棒。

可访问性的挑战

当然,让网站对所有用户100%友好是一个不可能完成的任务。首先,很难确定色盲的人究竟是如何看待颜色的。说实话,即使是没有色盲的普通用户对颜色和色调的感知也不一样。

有一些研究揭示了不同类型的色盲患者是如何感知颜色的。但是它们并不是绝对准确的,所以预测色盲用户看到什么仍然是一个挑战。

你总是可以优先考虑网站元素和内容来改进它,并确保大多数人都能正确地看到它。有许多方法可以使重要的元素脱颖而出,并对用户友好。你一定要确保这些基本元素是色盲安全的。最好的方法是使用对比色作为背景和元素本身。因此,在白色背景上使用黑色文本的传统是由这两种颜色之间的高对比度决定的。导航元素也应该突出显示,这样用户可以很容易地区分链接和主要内容。

运用色彩理论进行色彩盲安全设计

创建一个颜色盲安全网站的第一步是为你的调色板选择清晰和匹配的颜色。你的任务是把颜色的意义和心理放在一边,专注于良好的颜色组合和对比,创建清晰的网站页面与强大的层次和口音。

你可以使用以下技术和方法,以避免可能的陷阱,并有一个无障碍的网站设计:

1. 避免“糟糕的”颜色组合
最常见的色盲类型是难以区分红色/绿色和黄色/蓝色。因此,避免这些组合可以避免为色盲用户提供令人沮丧的体验。其他“危险”的颜色组合有:

  • 棕色/绿色
  • 绿色/蓝色
  • 紫色/蓝色
  • 灰色/蓝色
  • 绿色/灰色
  • 黑色/绿色
  • 黄/亮绿色

不好的颜色组合

2. 颜色对比度很好
正如你可能注意到的,上面的“糟糕的”颜色组合是不合适的,因为它们的对比度很差。黄色和淡蓝色在光量上太接近了,所以色盲用户很难区分这两种颜色。

请记住,色盲用户应该能够像普通人一样很容易地分辨出两种颜色的区别。什么颜色并不重要完全他们看到;而是让他们把自己当成两个人不同的颜色。请注意,据报道色盲的人更善于感知明亮的颜色,而不是区分暗淡的颜色。

3.使用互补色
互补色(在传统的色轮中是相对的颜色)是最好的实现一个伟大的颜色对比度,不会影响色盲用户。当然,除了将红色和绿色配对之外,这两种颜色在色轮中也是相反的,但对大多数色盲用户来说是大忌。

Paletton

4. 选择冷色/暖色对比
色轮也可以分为冷色调和暖色调。只要把它分成两半,除了暖色调如黄色、橙色和红色外,还可以设置冷色,如蓝色、紫色和绿色。在大多数情况下,冷色和暖色的对比效果非常好,可以用于创建无障碍设计。其理念是将冷色的深色调与暖色的浅色调相结合。不要忘记,一些色盲用户有一种黄色/蓝色的视觉障碍,所以最好避免这种组合。

5. 选择单色调色板
为了确保你没有使用一些不安全的颜色组合,去组合一个颜色的几种颜色。单色设计避免你做出错误的选择。此外,单色调色板和极简主义风格携手并进,使您的网站真正时尚和用户友好。

Slayeroffice调色板工具

6. 使用纹理和厚度创建口音。
添加纹理到你的颜色之一,使它更加突出,并有助于显示两个对象之间的差异。粗线和粗体文本也会有帮助。一些色盲者注意到,如果他们有一些“重量”,他们可以区分两种颜色,而细线和斜体的文本则很难区分。

工具和资源设计彩色盲安全网站

没有太多的工具和服务专注于为色盲用户创建安全的网站。你总是可以检查各种调色板生成器的颜色组合,寻找互补色,就像我在上面建议你的那样。这里有更多的工具和资源,可以帮助你创建一个容易使用的色盲网站。

Vischeck

一个不错的模拟器,运行图像和网页测试。在它的帮助下,你可以发现不同类型的色盲(红/绿或蓝/黄颜色赤字的形式)的人如何看待他们,并根据结果建立你的网站。

Vischeck

色盲的颜色

一个伟大的资源,包含吨的信息,色盲的性质,它的类型和他们的特点。它还为色盲用户提供各种测试,并提供在线检查网站颜色的工具。

色盲的颜色

MotoCMS 3.0颜色选择器

这个网站建设服务提供了一个很好的工具,检查颜色。它会自动显示所选模板的调色板,其中包含5种主要颜色和每一种颜色的一排色调。您可以更改主颜色并从下面的行添加新的颜色。对调色板的更改将应用于整个模板。

MotoCMS 3.0颜色选择器

色盲网页过滤器

这个工具还在开发中。但它已经提供了一个很酷的过滤范围,允许你解释你的网站,因为它是由色盲的人感知。您只需在一个字段中输入您的网站URL,并选择一种色差类型进行检查。

色盲网页过滤器

颜色实验室

这个工具允许你检查216色的网站管理员的调色板是如何被不同类型的视觉色彩缺陷的人感知的。

颜色实验室

结论

当然,网站的可访问性并不仅仅关注于颜色盲保功能。还有其他方面,你应该考虑使你的网站友好的所有类型的用户。从测试开始,经常检查,以确保你的网站是舒适的使用,你的流量会增长。

2020-03-22 17:38
相关热门