发布时间：2020-10-10 分类： 行业资讯
在文本开始之前查看文章框架：
1.为什么您希望对比度符合“颜色可访问性设计标准”？
无障碍设计有助于创造更好的体验，不仅仅是残障人士，也适用于没有残障人士的人。
例如，一般门需要自己推开或拉开，但是按下门可以自动打开为美国残疾人设计的门开关。
△来自：电动门开启器–访问和移动性
这个“一键安装”按钮安装在公共建筑的入口处，可帮助轮椅使用者轻松打开门。
对于持有很多东西的人，抱着孩子的人，或者只是打开它的人来说，它也很方便。 —因为它比推/打门要方便得多。
因此，符合无障碍设计标准的设计不仅为残疾人提供了更好的体验，而且使普通人更容易使用。
现实生活中的产品设计是这样的，互联网产品的设计是如此，色彩对比度的设计也是一样的。
1.对于面向大众的产品，尽量满足“视障用户”
Cathy O’推销员的辅助设计顾问Connor经常被问到“有多少残疾人正在使用您的产品？”他想说残疾人数量很大，如下：
世界上15％的人口有不同程度的残疾，包括视力，听力，活动能力和认知障碍。
大约4％的人口视力低下，0.6％的人失明。这些用户可能需要屏幕阅读器/贿赂阅读器的帮助。
7-12％的男性有不同形式的色觉缺陷（如色盲），不到1％的女性。他们难以区分某些颜色组合。
视力低下的情况随着年龄的增长而增加，50岁以上的人中有一半的视力低下。
世界上增长最快的人口是60岁以上的人。
40岁以后，大多数人都需要老花镜才能清楚地看到小物件或文字。
△来自：颜色对比以及为什么你应该反思它：Cathy O’康纳
2.尝试在“使用条件差”下使产品仍然可用
也许您认为您的设计在Mac上看起来很完美！
但也许你的一些用户正在使用旧的，性能不佳的设备/监视器;也许有人会在光线昏暗的环境中，在车辆上使用您的产品。如果您不进行可用性测试，那么您的产品很可能在真正的“主要使用场景”中几乎无用。
为了让状况不佳的用户仍然使用您的产品，并让更多视障人士使用您的产品，在产品设计中考虑“可访问设计”是非常有用的。必要的事情。
什么？出于美学原因，我不得不放弃足够的对比？看看这个伟大的代购源码网站Contrast Rebellion，它列出了许多真实案例，证明高对比度设计仍然很酷且很有吸引力。
2.什么是“颜色可访问性”？
WCAG 2.0（Web内容可访问性指南）旨在帮助设计人员创建良好的用户体验。
WCAG提到的四种主要残疾类型是：
视力障碍
听力障碍
运动障碍
智障人士
在此基础上，提出了“POUR可访问性原则”：
可感知（可感知）
易于操作（可操作）
易于理解（可理解）
稳定耐用（健壮）
颜色的选择属于“易于感知”的无障碍设计。换句话说，代购源码网站/应用程序的内容应该很容易看到——特别是文字和图像，应具有高色彩对比度，以便从背景中轻松识别。 。
颜色对比可访问性标准
1.4.3对比度（最小值）:文本和文本图像的视觉呈现必须具有至少4.5: 1（AA级别）的对比度。
大文本:大文本和大文本图像的对比度至少为3: 1。
1.4.6对比度（增强型）:文本视觉呈现和文本图像，至少7: 1对比度（AAA级别）。
大文本:大文本和大文本图像的对比度至少为4.5: 1。
Ps：大文本：至少18pt（24px）或14pt（19px）粗体。
△来自: Web内容可访问性指南（WCAG）2.0
将规范汇总到表中：
△from：让Bootstrap更易于访问— SitePoint，作者：Rhiana Heath
△这意味着当字体大小≥ 24px普通/19px粗体，可以在白色背景上使用的最轻的纯灰色是959595.
△当字体大小<1时24px普通/19px粗体，可以在白色背景上使用的最轻的纯灰色是767676.（如果在灰色背景上，文字应该更暗）
此外，在以下情况下，文本没有最低对比度限制：
非活动用户界面组件的一部分（按钮或菜单选项）。
表单字段的占位符或重影文本。
只是纯粹的装饰。
任何人都看不到的内容。
该文本是“包括其他重要的视觉内容图像”的一部分。
该文本是徽标或品牌名称的一部分。
下面，Salesforce Design Systems团队在选择其移动应用程序时满足“WCAG 2.0 AA标准”。
设计师发现他们在探索高对比度色彩组合时越来越喜欢高对比度设计。我相信您也会发现使用符合标准对比标准的颜色不会影响产品的美观。
△完全满意大字对比度> 3;小词对比> 4.5。
在设计时，您可以使用一些工具，例如“灰度/色盲模拟器”来测试设计。 （Photoshop在其“查看>校对设置”菜单中有内置的色盲过滤器。）
永远记住要问自己，页面上的CTA（号召性用语）是否“看起来”是页面中的主要元素。
3.“对比度检测”工具建议
一些有用的在线工具可用于测试对比度是否符合WCAG 2.0 AA的颜色可访问性设计标准。
WebAIM的色彩对比检查器
您可以直接在线调整颜色，并实时查看对比度是否符合要求。
❤️Tanaguru对比度查找器
如果测试的2种颜色不符合标准，则会自动推荐符合标准的一系列颜色。
轻松计算颜色对比度
方便地检查对比度是否符合标准。
颜色安全
在修复器之前，您可以使用它来预先选择符合标准的颜色。
颜色工具
还推荐直接检测颜色可访问性的Google颜色匹配工具。
颜色Oracle
检测不同类型的色盲，弱患者，并看到屏幕的效果。
4.大工厂案例
在阅读规范之后，仍然存在一些尚未解决的混淆，例如：
禁用文本对比度不是必需的，那么对比度可能不是1，多少合适？
需要最小对比度，然后是最高对比度？毕竟，纯黑加白色也很难。
黄橙色，无论白色背景如何，都不可能满足对比度的颜色。 3，如何处理？
因此，我选择了一些专注于无障碍设计的大型案例，以便找到一些规则。
谷歌浏览器
辅助功能设计已经是Google Chrome DNA的一部分。在过去两年中，在这方面做了很多工作。新的配色方案符合WCAG 2.0标准，并具有足够高的对比度。所有文字和图标都尽可能接近WCAG 2.0 AAA标准。
我使用EightShapes对比网格来验证Google文本颜色的对比度：
已经证实，Google在浅色和深色背景下的色彩匹配几乎满足WCAG 2.0 AAA标准（色彩对比度> 4.5）。
白色背景上的警告颜色对比度仅为3.3，其仅满足AA标准（颜色对比度> 3）。
此外，残疾人的色彩对比度不受限制，谷歌对比度为1.8,2.2。
此外，我发现Google在深色背景上使用的颜色并不直接用于获取品牌颜色，而是根据不同的背景调整颜色。
即使使用品牌颜色，Google也会尝试与白色背景形成对比，以符合AA标准（黄色和橙色除外）。
材料设计
材料Dsign官方描述：
可访问的调色板
为支持可用性的应用选择主色，辅助色和强调色。确保元素之间有足够的色彩对比，以便低视力的用户可以查看和使用您的应用程序。
对比度
W3C建议使用以下对比文本和图像文本:
的对比度小文本的背景对比度至少应为4.5: 1
大文本（14 pt粗体/18 pt常规和向上）的对比度应至少为3: 1与背景。
元素
当前处于禁用状态的元素不受颜色对比度标准:的限制，包括处于禁用状态或非活动菜单项的按钮。
通过从草图中选择Material Design的模板来测试颜色对比度。
△材料设计
我专门测量了按钮禁用颜色的对比度，发现白色背景为1.8;深色背景的对比度更高，2.5。
实测值：
黑色/白色，深灰色，危险色，两者都是> 4.5，符合AAA标准。
白色背景的“绿色”满足AA标准。
禁用的文本颜色对比度分别为2.6,2.5。
看起来暗背景上的灰色对比度比浅背景更容易实现。
的iOS
iOS的对比度通常低于MD。
即使在Apple的官方规范中，“对比”也受到明确规范：
您的应用中对比度不足会让每个人都难以阅读内容。例如，图标和文本可能与背景混合在一起。在线颜色对比度计算器可以帮助您准确分析应用程序中的颜色对比度，以确保它符合最佳标准。力争最小对比度为4.5: 1，尽管7: 1是首选，因为它符合更严格的可访问性标准。
我猜iOS11会让瘦文字变得越来越大，细线图标会变成一个坚固的图标。它也是改善对比度并使更多人更容易看到它的初衷。
△来自：iOS 10 vs 11：完整的UI对比分析，作者：Taylor Hu
介质
看看早期的中等，只有“大M”和深灰色，满足对比度> 3.0。
今天的Medium的色彩对比为≥ 3.0。
测量发现:
黑色，深灰色，危险的颜色，都符合对比度> 4.5。
某些地方的灰色文字（例如非活动标签文字），对比度> 3.
撰写文章的占位符对比是2.1。
禁用控件的对比度为1.2（右侧的开/关单选按钮）。
绿色文本更难以满足;当它是大面积颜色时，绿色更亮。
在背景中使用不同深浅的绿色。
△背景中使用不同深浅的绿色。
微博
黑色，深灰色，危险的颜色，都符合对比度> 4.5。
禁用颜色对比度为1.9，接近2.
规则摘要
由此，我们可以粗略地总结一些可以适当应用的规则：
黑/白，深灰色，危险的颜色，尽量满足对比度> 4.5。
最高对比度通常在16-18左右。 （最高对比度是21，即000000 + FFFFFF。尽量不要使用这种对比，这会引起一些患有阅读障碍的患者的不适，他们会觉得文字是旋转的，模糊的）
禁用颜色，占位符虽然没有限制，但浅背景上的对比度约为1.8~2.3（多达2），深色背景对比度约为2.5~3（最高为3）。
非活动控件（如标签）文本颜色正常对比度> 3.
文字颜色，icongraphy，为了满足无障碍颜色对比的要求，一般不要直接使用品牌颜色，而是加深/减轻再使用。
如果主背景是白色，品牌颜色和白色的对比应该满足≥ 3尽可能多。 （视情况而定，黄色，橙色和绿色更难以满足）。
深色背景的对比度比浅色背景更容易满足。 （尽管如此，在产品中使用暗色调时要谨慎，研究表明，散布在黑色上阅读白色文字的人比白色黑色文本更困难.Bauer和Cavonius发现，当在浅色背景上阅读黑色字符时，在深色背景上读取轻量词的准确度提高了26％。参考：为什么在深色背景上使用浅色文字是一个坏主意）
五，配色过程符合“无障碍色彩标准”
在设计时，您可以从一个非常清晰的解决方案开始，然后慢慢适应您的美学。
1.首先确定每种颜色的深度
首先确定的主要颜色可能是蓝色。
根据主色确定不同的灰色阴影。 Colllor是一个在线工具，可以帮助您完成工作。
△Colllor代购源码网站截图
选择灰色后，根据灰色选择灰色和深色。
选择灰色后，使用相同的方法选择其他颜色的深色。
△从:不要让你的调色板成为一个空球，由: Zack Gehin
每种颜色的4-6种色调都是合适的，不同色调的色调太紧密和谐。
如果您自己创建更改规则，则可以执行此操作，例如“叠加5％黑色”或“透明度变为80％”等等。无论使用哪种方法，确保所有颜色的阴影遵循统一规则。
△颜色加深和变亮的方法示例。从:颜色对比度以获得更好的可读性| Viget，来自: Tom Osborne
“试着—失败—再试一次”——这个过程可能需要很长时间。 Zack Gehin花了40个小时为Widen Enterprises制作色板; &MDASH;测试，重新选举，调整。结果符合他们的期望，表达了他们所希望的情绪，并符合Acessibility标准。
Zack Gehin使用Colllor创建的样本示例：
△来自:不要让你的调色板成为一个空球，由: Zack Gehin，2017.8.16
然后将所选颜色放入组件和背景中以测试对比度。
2.确定文本颜色
这是一项系统工作，从一些基本文本类型开始：
主要文本颜色:段落，标签，其他主要文本。
辅助文本颜色:表单助手（表单复印件），标题文本，表格标题等。
交互式文字颜色：主要是链接文字。
内联错误文本颜色:某些交互式控件旁边有些。
禁用文本颜色：通常用于表单控件和按钮。
确保至少包括：4种主要，次要，链接和错误文本颜色。小心添加新颜色，例如文本文本颜色和图标填充颜色。
图标的颜色通常可以遵循已设置的主要，次要，交互和错误的颜色。
同样，首先确定正文文本的颜色值，从灰色开始。
测量每种背景颜色上可用的最低对比度的灰度。
如果按“WCAG 2.0 AA”标准，下图中的6B797F是白色背景上最浅的灰色文本。
△来自:色彩对比度以获得更好的可读性| Viget，来自: Tom Osborne
接下来，选择“链接文本颜色”和“错误文本颜色”。
△来自:色彩对比度以获得更好的可读性| Viget，来自: Tom Osborne
在重复比较之后，最终确定在白色背景上选择上述两种颜色（对比度> 4.5）。
在上一节中，从主要代购源码网站/应用程序衡量，
选项卡文本未激活，对比度通常为> 3;
禁用文本，占位符，一般对比度约为2（夜间模式可以尝试满足3）。
3.检测文本颜色的对比度
然后，将文本放在按钮上，检查对比度是否令人满意。
不要忘记交互状态，例如按钮，选项卡，列表组以及链接的悬停，活动和选定状态。
△来自:色彩对比度以获得更好的可读性| Viget，来自: Tom Osborne
通过在每种背景颜色上放置文本来测试文本对比度。您可以使用EightShapes对比度网格实时测量两种颜色的对比度。
来回反复测试时反复优化样本。
△来自：Light&暗色系统，由: Nathan Curtis
4.在不同环境中测试样本
这是设计过程中最重要的步骤之一。
研究确定了用户使用您产品的主要环境。人类环境设计将帮助您确定必须考虑的环境。
环境测试非常简单，将您的设备置于强烈的阳光下，将其置于光线昏暗的房间内，并降低手机的屏幕亮度（许多用户通常无法通电的用户）自己感受到测试。
如果某些地方运作不佳，请再次进行。
在不同的显示器上测试样本
虽然我们很多人都很幸运能够使用好的设备，但世界上很多人都没有这么好的条件。很容易习惯Retina或5k显示器，但如果我们使用旧的低质量显示器，我们会惊讶于你如何使用它们，以及图纸如何看起来像这样。
△从:不要让你的调色板成为一个空球，由: Zack Gehin
如果您想知道用户正在使用哪些显示设备，您可以从Google Analytics或您有权访问的其他数据分析工具中获取数据。
5.确定不同色调的颜色组合
△来自:色彩对比度以获得更好的可读性| Viget，来自: Tom Osborne
6.输出颜色规范文档
△来自:色彩对比度以获得更好的可读性| Viget，来自: Tom Osborne
其他设计要点
1.输入应有明确的边界
△良好的输入输入区域。
输入框具有明确的边界，这对于动作/认知障碍的用户很重要。
清晰的边界允许用户清楚地知道点击目标的位置和时间。没有明确的边界，认知受损的用户可能难以找到输入框的位置。
上面的图片是Medium写一篇文章的页面。没有线索告诉人们点击区域在哪里。
实际上，点区域只是篮子的一小部分。
本文的上述两节是写的，虽然它们不使用传统的输入框形式，但它们为用户提供了更多的信息和线索。
在这两个界面中，用户可以单击下面空白区域中的任意位置开始键入注释;
此外，笔记记录的标题在两条水平线之间，视觉线索更明显。
2.确定输入控制边框的颜色时，请考虑不同的状态
文本输入框，文本输入区域和单选按钮都需要足够高的对比度以满足可见性和可用性。控件的边框颜色非常重要，不能太靠近背景颜色。
有几个主要考虑因素：获得焦点状态，默认状态，禁用状态，错误状态。
△来自：Light&暗色系统，由: Nathan Curtis
3.如果表单没有固定标签，则占位符将满足最小对比度要求。 （对比度> 4.5）
△来自:每个设计师需要知道的7件事可访问性，由: Jesse Hausler
但事实上，在价格输入的右下角，更好的方法是将标签带到外面：
△来自:每个设计师需要知道的7件事可访问性，由: Jesse Hausler
4.另外，请注意“背景颜色A”放在“背景颜色B”
上的情况例如，具有自己的浅灰色背景的卡片被放置在大的背景奶油色上。此时，应该注意，两种颜色仍然组合以具有足够高的对比度。
使用一些装饰技术来缓解弱对比度，例如添加边框和添加阴影。
△来自：Light&暗色系统，由: Nathan Curtis
七。最后
这些文字不是为了向人们展示，而是故意不被人看清楚。
具有高对比度的单词不仅能让人们看得更清楚，而且能让人们更快更顺畅地阅读。
在产品设计过程中，留出足够的时间仔细检查颜色。
不要让用户的眼睛受到压迫，不要让用户特别刻苦地看待事物，不要给我们忙碌的生活增添压力——使用WCAG来满足设计中足够高的对比度，并努力为您的生活增添一些舒适，适当和愉快的体验。
