色彩无障碍设计color-accessibil课件

V

色彩无障碍设计（ColorAccessibility）之「对比度」的探索V色彩无障碍设计（ColorAccessibi1为什么要让对比度满足「色彩无障碍设计标准」？1为什么要让对比度满足「色彩无障碍设计标准」？当你浏览自己喜欢的网站或在你选择的设备上查看产品的最新版本时，请花点时间以不同的方式查看它。从屏幕上退后一步。稍微闭上眼睛，使你的视线有点被睫毛遮挡。你还能看到并使用这个网站吗？你是否能够阅读标签，字段，按钮，导航和小页脚文本？你能想象其他人会以何种不同方式阅读和使用它吗？满足「ColorAccessibility」当你浏览自己喜欢的网站或在你选择的设备上查看产品的最新版本时约有4％

的人口视力低下，0.6％

视盲。7-12％

的男性、1％

的女性有不同形式的色觉缺陷（如色盲）。他们难以区分某些特定颜色组合。低视力状况随着年龄的增长而增加，50

岁以上的一半人有一定程度的低视力低状况。全球增长最快的人群是

60

岁以上的人。过了

40

岁，大多数人都需要老花镜，才能清楚地看到小物体或文字。1.面向大众的产品，要考虑「有视觉障碍的用户」满足「ColorAccessibility」1.面向大众的产品，要考虑「有视觉障碍的用户」满足「Colo也许你觉得你的设计在Mac上看起来很完美啊！2.要尽量让产品在「不佳的使用条件」下，仍能使用满足「ColorAccessibility」老旧、性能差的设备/显示器

交通工具强烈的阳光下、昏暗的环境也许你觉得你的设计在Mac上看起来很完美啊！2.要尽量让满足「ColorAccessibility」在这个多样化的世界上，并不是所有人都能毫无障碍、顺利地使用各种产品。如果没做可用性测试，很可能在真正的「主要使用场景」中，你的产品是几乎没法用的。优秀的无障碍设计，不仅能让残疾人用户正常地与产品交互；还会为普通人提供更好的使用体验。将「无障碍设计」考虑到产品设计中，是一件非常有必要的事。满足「ColorAccessibility」在这个多样化的2「ColorAccessibility」是什么？2「ColorAccessibility」是什么？「ColorAccessibility」是什么？WCAG2.0（WebContentAccessibilityGuideline，Web内容无障碍指南）提出了「POUR无障碍原则」：易于感知的（Perceivable）便于操作（Operable）容易理解的（Understandable）稳定耐用的（Robust）

颜色的选择属于「易于感知的」无障碍设计范畴。也就是说，网站/App的内容应该很容易被看到——尤其是文字和图像，应该有足够高的色彩对比度，使之很容易地从背景中被辨识出来。「ColorAccessibility」是什么？WCAG对比度（最小）：文字和背景色的对比度至少要有4.5:1的对比度（AA级），大文本：大号文本至少有3:1的对比度;对比度（加强）：文字和背景色的对比度至少有7:1的对比度（AAA级），大文本：大号文本至少有4.5:1的对比度。Ps：大文本大于等于24px或19px(bold)。颜色对比度无障碍标准「ColorAccessibility」是什么？对比度（最小）：文字和背景色的对比度至少要有4.5:1「ColorAccessibility」是什么？这项规范可以帮助视力障碍用户更好地使用互联网产品。「ColorAccessibility」是什么？这项规范可将规范总结成表格：「ColorAccessibility」是什么？当字号≥24pxnormal/19pxbold,白背景上能用的最浅的纯灰色是#959595。当字号＜24pxnormal/19pxbold，白色背景上可以用的最浅纯灰色是#767676。（如果在灰色背景上，文字颜色应该更深）将规范总结成表格：「ColorAccessibility」以下情况的文本，无最低对比度限制：未激活的用户界面组件的一部分（按钮或菜单选项）；表单字段的占位符(placeholder)或ghosttext；「ColorAccessibility」是什么？以下情况的文本，无最低对比度限制：「ColorAccess以下情况的文本，无最低对比度限制：只是纯粹的装饰；文本作为「包含其他重要视觉内容图片」的一部分；「ColorAccessibility」是什么？以下情况的文本，无最低对比度限制：「ColorAccess以下情况的文本，无最低对比度限制：文本作为logo或品牌名称的一部分。「ColorAccessibility」是什么？以下情况的文本，无最低对比度限制：「ColorAccess3「对比度检测」工具推荐3「对比度检测」工具推荐「对比度检测」工具1.WebAIM’sColorContrastChecker：可以直接在线调颜色，实时看对比度是否满足要求。「对比度检测」工具1.WebAIM’sColorCont「对比度检测」工具2.Easilycalculatecolorcontrastratios：方便地检测对比度是否达标。「对比度检测」工具2.Easilycalculateco4大厂案例4大厂案例GoogleChrome大厂案例「无障碍设计」已经是GoogleChromeDNA的一部分。过去的两年中，这方面做了尤其多的努力。新的配色方案符合WCAG2.0规范，有足够高的对比度。所有的text、icon，都尽量满足WCAG2.0AAA标准。GoogleChrome大厂案例「无障碍设计」已经是GoGoogleChrome大厂案例经验证，发现Google果然在明暗两种背景下的配色，几乎都满足WCAG2.0AAA标准（colorcontrastratio>4.5）。唯独白背景下的warning色对比度为3.3，仅满足AA标准(colorcontrastratio>3)。另，disabled的颜色对比度不属于限定范围，Google对比度是1.8、2.2。GoogleChrome大厂案例经验证，发现GoogleGoogleChrome大厂案例另外，Google在深浅背景上使用的颜色，都不是直接将brandcolor拿过来就用，而是根据不同背景调整后的颜色。GoogleChrome大厂案例另外，Google在深浅GoogleChrome大厂案例而即使是brandcolor，Google也尽量使之和白背景的对比度满足AA标准（黄色、橙色例外）。GoogleChrome大厂案例而即使是brandcoTwitter大厂案例Twitter大厂案例Twitter大厂案例黑色、深灰色，危险色，都满足对比度＞4.5；Disabledcolor对比度是1.9，接近2。Twitter大厂案例黑色、深灰色，危险色，都满足对比度＞规律总结大厂案例黑/白色、深灰色、危险色，都尽量满足对比度＞4.5；（最高对比度一般在16-18左右；最高对比度是21，也就是#000000+#FFFFFF。它们会产生一种“震颤效应”，会让你觉得两种色彩之间会产生模糊、震颤或者发出光晕的视觉效果。尽量别用这种对比，这会引起一些诵读困难症患者的不适）规律总结大厂案例黑/白色、深灰色、危险色，都尽量满足对比度规律总结大厂案例深色背景的对比度，比浅色背景的容易满足一些。（即便如此，谨慎在产品中使用深色调，研究表明散光的人在黑色背景上阅读白色文字比在白色背景上阅读黑色文字更难。在浅色背景上用黑色字符阅读时，比在深色底阅读浅色字的准确率，高出26%)规律总结大厂案例规律总结大厂案例Disabledcolor、placeholder虽未做限制，但浅色背景上对比度大概是1.8~2.3（尽量2以上），深色背景对比度大致是2.5~3（尽量3）；未激活控件（如tab）文字颜色一般对比度＞3；文字颜色、icongraphy，为了满足无障碍色彩对比要求，一般不直接使用brandcolor，而是加深/变浅后再用；规律总结大厂案例Disabledcolor、placeho5满足「无障碍色彩标准」的配色流程5满足「无障碍色彩标准」的配色流程⒈先确定各颜色的深浅「无障碍色彩标准」的配色流程首先确定的主色调，比如是蓝色。根据主色调确定不同深浅的灰色。Colllor这个在线工具能帮你完整这项工作。设计时，可以先从一个非常清晰的方案开始尝试，然后再慢慢往你的美学方向调整。⒈先确定各颜色的深浅「无障碍色彩标准」的配色流程首先确定的「无障碍色彩标准」的配色流程选定一个灰色后，再根据这个灰色选出灰色的浅色系和深色系。「无障碍色彩标准」的配色流程选定一个灰色后，再根据这个灰色选「无障碍色彩标准」的配色流程每个颜色4-6个深浅度比较合适，不同深浅的颜色别太接近，互相和谐。如果自己创建变化规则也可以，如「叠加5%的黑色」或者「透明度变为80%」等等。无论采用哪种方法，确保所有颜色的深浅变化，都遵循统一的规则。「无障碍色彩标准」的配色流程每个颜色4-6个深浅度比较合「无障碍色彩标准」的配色流程尝试—失败—再尝试」——这个过程可能会花费大量时间。测试、重选、调整。满足accessibilitystandards。然后再将选好的颜色，放到组件、背景中去测试对比效果。「无障碍色彩标准」的配色流程尝试—失败—再尝试」——这个过程2.确定文字颜色「无障碍色彩标准」的配色流程主要文字颜色:段落、标签、其他主要文字；次级文字颜色:表单辅助说明、说明文字、表格标题等；可交互文字颜色：主要是链接文字；错误信息文字颜色:有的在一些交互控件旁边；禁用文字颜色：通常用在表单控件和按钮上。确保至少包含：主要，次要，链接和错误4种文本颜色。图标颜色一般可以直接沿用已设置好的primary,secondary,interactive，error的颜色。2.确定文字颜色「无障碍色彩标准」的配色流程主要文字颜色:「无障碍色彩标准」的配色流程

测算出在背景色上，可用的最低对比度的灰色。如果按「WCAG2.0AA」的标准，下图的#6B797F就是白背景上文字的最浅灰色。「无障碍色彩标准」的配色流程测算出在背景色上，可用的最低对3.检测文字色的对比度「无障碍色彩标准」的配色流程然后，将文字放在按钮上，检测对比度是否满足要求。不要忘记交互式状态，例如按钮，选项卡，列表组和链接的hover，active和selected状态。3.检测文字色的对比度「无障碍色彩标准」的配色流程然后，将「无障碍色彩标准」的配色流程将文字放在每一种背景色上测试文字对比度。可以用EightShapesContrastGrid实时测量两两颜色的对比度是否达标。「无障碍色彩标准」的配色流程将文字放在每一种背景色上测试文字「无障碍色彩标准」的配色流程来回测试的同时，反复优化色板「无障碍色彩标准」的配色流程来回测试的同时，反复优化色板4.在不同环境下测试你的色板「无障碍色彩标准」的配色流程这是设计过程中最重要的步骤之一。调研确定用户使用你的产品的主要环境。环境测试很简单，把你的设备带到强日光下去、放在昏暗房间里，调低手机的屏幕亮度（许多手机快没电了的用户经常这样做）自己去感受测试。如果有些地方不好用，重新做。4.在不同环境下测试你的色板「无障碍色彩标准」的配色流程这5.确定不同色调的颜色组合方式「无障碍色彩标准」的配色流程5.确定不同色调的颜色组合方式「无障碍色彩标准」的配色流程6.输出色彩规范文档「无障碍色彩标准」的配色流程6.输出色彩规范文档「无障碍色彩标准」的配色流程5其他设计点5其他设计点1.Input要有清晰的边界。其他设计点Input是常被人忽略的一个方面。输入框有明确的边界，这对行动/认知障碍的用户很重要。清晰的边界，可以让用户明确知道点击目标的位置和大小。如果没有清晰的边框，认知障碍用户可能很难找到输入框在哪。一个传统输入框样式，界限明晰，标签清楚1.Input要有清晰的边界。其他设计点Input是常其他设计点下图7个input的例子，只有「SearchTw