专为色盲打造网站可用性的5个适用方法 (专为色盲打造的眼镜)

本文目录导航：

• 专为色盲打造网站可用性的5个适用方法
• 可用性评价 — Usability Evaluation
• 检测网页能否可以关上

专为色盲打造网站可用性的5个适用方法

关于色盲症患者而言，咱们设计师精心搭配的色调很或许毫无用途，甚至会大失所望。

该如何同时统筹色盲患者的需求呢？当天这篇文章总结了5个奇妙的方法。

想成为一个能处置疑问而不是视觉驱动的设计师，这篇就不要放过了。

假设你的网站有色调或对比度上的疑问，或许会间接影响用户的访问。

假设是商业网站，那么或许会间接影响用户的生产。

幸运的是，这里有几点可以协助你防止这些疑问，优化网站的可用性，特意是关于色盲症的患者。

什么是色盲呢？

色盲并不齐全指的是看不见颜色或许所有看成灰色。

理论指的是色弱，或许对颜色的分辨才干较差。

人有三种视锥区分感触红、蓝、绿色，当这其中一个视锥出疑问的时刻，就会形成色盲。

图中四个色轮 区分是 反常、白色盲、绿色盲以及蓝色盲 看到的色轮的体现。

最经常出现的两种色盲是 绿色盲和白色盲，男子患者要比女性多一些。

其中绿色盲最经常出现，男子患病率为7%，女性则为0.5%。

所以总共会有8%左右的人群会有色盲的体现，而这些是商业网站相对无法能疏忽的人群。

这里有5个便捷的方法，协助你优化网站的色调可用性。

方法一：经常使用明晰的色调称号

由于男子的色盲症患者较多，所以假设你的网站须要用户挑选颜色，特意是发售男子的服装的时刻，要着重思考这个疑问。

对色盲症患者来说，他们或许很难了解衣服的真正颜色是什么。

假设是实体店，他们可以问问自己的好友；然而假设是网店，或许就会比拟费事。

下图是一个粉色的T恤，绿色盲看起来就是第二种样子，而白色盲看起来则是第三种，区别真的很大。

这个疑问处置起来其实也比拟便捷，就是文字标注上明晰的颜色称号。

在经常使用颜色的称号的时刻，尽量不要用那些奇异的名字，而是要用便捷的“浅蓝色”、“深绿色”等等。

如下图的称号标注区分为“浅蓝色斜纹T恤”和“粉红斜纹T恤”，任何人都会知道这些颜色究竟什么样子。

方法二，经常使用高效的颜色标签

另一个经常出现的疑问是，有些网站会经常使用色块作为挑选按钮。

假设只要色块的话，那么对色盲症来说十分不友好。

（参见第一个色轮图）

有一些网站经常使用了纯文字来示意颜色，这个方法只管对色盲症患者来说比拟友好，然而关于个别人来说却稍显单调。

这个案例就会更好一些。

以色块作为个别的挑选按钮，当须要看到颜色称号的时刻，可以在鼠标浮动在上的时刻显示颜色标签。

最好的处置方法应该是这样的，同时显示色块和颜色标签。

方法三，防止经常使用颜色作为繁多的揭示

比如在设计表格的时刻，不要这样设计。（“白色为必填项”）

而是要这样：

另外的相似的例子是这样的，左面的设计要比左面的好。

由于在色盲症患者眼里，这个网页会是这个样子：

所以不要用便捷的颜色作为指向性的文案形容。

方法四，不要用低对比度设计

适当运用对比度是构成视觉疏导、建设视觉焦点的有效方法；适合的对比度更是将内容和链接明晰的展现给用户的惟一方法。

有一些设计师经常经常使用低对比度以到达“优雅”的成果，然而关于可用性来说得失相当。

依据网页可读指点准则（Web Content Accessibility Guidelines ，WCAG）将对比度分红了三个等级区分为A、AA、AAA。

网页中可读文字至少要到达AA级别，即4.5：1，最佳的对比度要到达7：1。

上方这个案例中对比度仅仅为2.36:1, 反常人看下来都有些费力，关于色盲患者来讲更是噩梦。

或许你并不分明这些数字象征着什么，幸运的是，曾经有很多工具协助咱们审核查比度。

比如这个Contrast Ratio checker。

经过修正文字或背景的颜色可以看到对比度的评分。

方法五，测试你的设计

有很多工具能够模拟色盲的成果，应用这些工具可以协助咱们在设计的时刻防止产生疑问。

Colour Oracle有windows和mac的版本，能够全局模拟色盲成果。

你也可以应用Ohotoshop来审核你的设计。

经过 视图-校样设置-色盲 来检查色盲成果。

假设你青睐Sketch的话，这个插件也能帮到你：Colour Contrast Analyser

当然假设你的网站曾经上线，也可以经过WAVE来审核网页的可及性疑问。

颜色可及性设计（Colour accessible design）

确保你的网站对一切人，包括色盲患者有良好的用户体验。

对以上的一些准则越相熟，你就越或许防止一些失误的设计，而这些或许对你的网站，尤其是商业网站的效益带来极大的优化。

译文

可用性评价 — Usability Evaluation

现今环球科技设施占据主导位置，用户对其依赖日益加深。

默认产品与家电的市场份额宏大，产品间的差异不只体如今外观和配置，更体如今可操作性和用户友好性。

本文讨论了可用性评价的基础，从定义、评价方法到互联网环境下网页的可用性。

可用性定义为产品在特定经常使用场景下，为特定用户用于特定目标时提供的有效性、效率和满意度。

评价方法分为面向专家与面向用户两类，蕴含构成性与总结性评价，关键参数为有效性、效率和满意度。

产品开发流程中应高度注重可用性评价，最好贯通开发的每个阶段。

评价方法包括启示式评价、认知演练、问卷考查、焦点小组与可用性测试。

网页可用性要求用户友好、消息检索极速，影响起因分为技术与知觉心思。

命名、处置期待期间、消息架构与内容排版、视觉层级明晰、视效效应一致均为关键考量。

评价在开发流程中至关关键，提高了实物与数字产品的易用性。

本文浅谈可用性评价的基础与关键点，未深化详细方法与术语。

检测网页能否可以关上

在检测一个网页能否可以关上时，咱们理论会采取一系列步骤来确保准确性和效率。

首先，经过间接在阅读器的地址栏中输入网页的URL，并按下回车键，阅读器会尝试加载该网页。

此时，阅读器底部的形态栏会显示加载进展，同时页面内容区域会逐渐出现网页内容。

假设网页能够完成加载，那么阅读器会显示网页的HTML内容，包括文本、链接以及或许的内嵌视频或音频等资源。

用户可以经过检查网页上的文字消息、点击链接或尝试播放媒体内容来进一步验证网页的可用性。

假设网页无法关上，阅读器或许会显示一个失误页面，如“404 Not Found”示意网页未找到，或许“500 Internal Server Error”标明主机外部失误。

此外，假设网页因网络疑问而无法加载，阅读器或许会显示“无法衔接到主机”的揭示。

在检测环节中，咱们还可以应用开发者工具（如Chrome阅读器的“开发者工具”）来检查网络恳求和照应状况，以便更详细地诊断疑问。

经过这些方法，咱们可以准确判别网页能否可以反常关上。