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

V色彩无障碍设计（ColorAccessibility）之对比度的探索V色彩无障碍设计（ColorAccessibiVV1为什么要让对比度满足色彩无障碍设计标准？1为什么要让对比度满足色彩无障碍设计标准？当你浏览自己喜欢的网站或在你选择的设备上查看产品的最新版本时，请花点时间以不当你浏览自己喜欢的网站或在你选择的设备上查看产品的最新版本时，请花点时间以不同的方式查看它。从屏幕上退后一步。稍微闭上眼睛，使你的视线有点被睫毛遮挡同的方式查看它。从屏幕上退后一步。稍微闭上眼睛，使你的视线有点被睫毛遮挡。你还能看到并使用这个网站吗？你是否能够阅读标签，字段，按钮，导航和小页脚文本？你能想象其他人会以何种不同方式阅读和使用它吗？满足ColorAccessibility当你浏览自己喜欢的网站或在你选择的设备上查看产品的最新版本时约有4的人口视力低下，0.6 视盲。7-12的男性、1 的女性有不同形式的色觉缺陷（如色盲）。他们难以区分某些特定颜色组合。低视力状况随着年龄的增长而增加，50 岁以上的一半人有一定程度的低视力低状况。全球增长最快的人群是60 岁以上的人。过了40 岁，大多数人都需要老花镜，才能清楚地看到小物体或文字。1.面向大众的产品，要考虑有视觉障碍的用户满足ColorAccessibility1.面向大众的产品，要考虑有视觉障碍的用户满足Colo也许你觉得你的设计在Mac上看起来很完美啊！2.要尽量让产品在不佳的使用条件下，仍能使用满足ColorAccessibility老旧、性能差的设备老旧、性能差的设备/显示器显示器交通工具交通工具强烈的阳光下、昏暗的环境强烈的阳光下、昏暗的环境也许你觉得你的设计在Mac上看起来很完美啊！2.要尽量让满足ColorAccessibility在这个多样化的世界上，并不是所有人都能毫无障碍、顺利地使用各种产品。如果没做可用性测试，很可能在真正的主要使用场景中，你的产品是几乎没法用的。优秀的无障碍设计，不仅能让残疾人用户正常地与产品交互；还会为普通人提供更好的使用体验。将无障碍设计考虑到产品设计中，是一件非常有必要的事。满足ColorAccessibility在这个多样化的VV2ColorAccessibility是什么？2ColorAccessibility是什么？ColorAccessibility是什么？WCAG2.0（WebContentAccessibilityGuideline，Web内容无障碍指南）提出了POUR无障碍原则：易于感知的（易于感知的（PerceivablePerceivable）便于操作（便于操作（OperableOperable）容易理解的（容易理解的（UnderstandableUnderstandable）稳定耐用的（稳定耐用的（RobustRobust）颜色颜色的选择属于易于感知的易于感知的无障碍设计范畴。也就是说，网站/App的内容应该很容易被看到尤其是文字和图像，应该有足够高的色彩对比度，使之很容易地从背景中被辨识出来。ColorAccessibility是什么？WCAG对比度（最小）：文字和背景色的对比度至少要有4.5:1的对比度（AA级），大文本：大号文本至少有3:1的对比度;对比度（加强）：文字和背景色的对比度至少有7:1的对比度（AAA级），大文本：大号文本至少有4.5:1的对比度。Ps：大文本大于等于24px或19px(bold)。颜色对比度无障碍标准ColorAccessibility是什么？对比度（最小）：文字和背景色的对比度至少要有4.5:1ColorAccessibility是什么？这项规范可以帮助视力障碍用户更好地使用互联网产品。ColorAccessibility是什么？这项规范可将规范总结成表格：ColorAccessibility是什么？当字号24pxnormal/19pxbold,白背景上能用的最浅的纯灰色是#959595。当字号24pxnormal/19pxbold，白色背景上可以用的最浅纯灰色是#767676。（如果在灰色背景上，文字颜色应该更深）将规范总结成表格：ColorAccessibility以下情况的文本，无最低对比度限制：未激活的用户界面组件的一部分（按钮或菜单选项）；表单字段的占位符(placeholder)或ghosttext；ColorAccessibility是什么？以下情况的文本，无最低对比度限制：ColorAccess以下情况的文本，无最低对比度限制：只是纯粹的装饰；文本作为包含其他重要视觉内容图片的一部分；ColorAccessibility是什么？以下情况的文本，无最低对比度限制：ColorAccess以下情况的文本，无最低对比度限制：文本作为logo或品牌名称的一部分。ColorAccessibility是什么？以下情况的文本，无最低对比度限制：ColorAccessVV3对比度检测工具推荐3对比度检测工具推荐对比度检测工具1.WebAIMsColorContrastChecker：可以直接在线调颜色，实时看对比度是否满足要求。对比度检测工具1.WebAIMsColorCont对比度检测工具2.Easilycalculatecolorcontrastratios：方便地检测对比度是否达标。对比度检测工具2.EasilycalculatecoVV4大厂案例4大厂案例GoogleChrome大厂案例无障碍设计已经是GoogleChromeDNA的一部分。过去的两年中，这方面做了尤其多的努力。新的配色方案符合WCAG2.0规范，有足够高的对比度。所有的text、icon，都尽量满足WCAG2.0AAA标准。GoogleChrome大厂案例无障碍设计已经是GoGoogleChrome大厂案例经验证，发现Google果然在明暗两种背景下的配色，几乎都满足WCAG2.0AAA标准（colorcontrastratio4.5）。唯独白背景下的warning色对比度为3.3，仅满足AA标准(colorcontrastratio3)。另，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.54.5；（最高对比度一般在16-18左右；最高对比度是21，也就是#000000+#FFFFFF。它们会产生一种“震颤效应”，会让你觉得两种色彩之间会产生模糊、震颤或者发出光晕的视觉效果。尽量别用这种对比，这会引起一些诵读困难症患者的不适）规律总结大厂案例黑/白色、深灰色、危险色，都尽量满足对比度规律总结大厂案例深色背景的对比度，比浅色背景的容易满足一些。深色背景的对比度，比浅色背景的容易满足一些。（即便如此，谨慎在产品中使用深色调，研究表明散光的人在黑色背景上阅读白色文字比在白色背景上阅读黑色文字更难。在浅色背景上用黑色字符阅读时，比在深色底阅读浅色字的准确率，高出26%)规律总结大厂案例规律总结大厂案例Disabledcolor、placeholder虽未做限制，但浅色背景上对比度大概是1.82.3（尽量2以上），深色背景对比度大致是2.53（尽量3）；未激活控件（如tab）文字颜色一般对比度3；文字颜色、icongraphy，为了满足无障碍色彩对比要求，一般不直接使用brandcolor，而是加深/变浅后再用；规律总结大厂案例Disabledcolor、placehoVV5满足无障碍色彩标准的配色流程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.输出色彩规范文档无障碍色彩标准的配色流程VV5其他设计点5其他设计点1.Input要有清晰的边界。其他设计点Input是常被人忽略的一个方面。输入框有明确的边界，这对行动/认知障碍的用户很重要。清晰的边界，可以让用户明确知道点击目标的位置和大小。如果没有清晰的边框，认知障碍用户可能很难找到输入框在哪。一个传统输入框样式，界限明晰，标签清楚1.Input要有清晰的边界。其他设计点Input是常其他设计点下图7个input的例子，只有SearchTwitter的对比度足够高，满足无障碍设计标准让人看得清。其他设计点下图7个input的例子，只有Search其他设计点下图2个写文章的截面，虽然也没使用传统的输入框形式，但是它们给用户提供更多的信息和线索。在这两个界面，用户可以点击下面空白区域的任意位置开始输入笔记；而且，note-taking笔记的标题位于两条水平线之间，视觉线索更明显一点。其他设计点下图2个写文章的截面，虽然也没使用传统的输入框形式2.如果表单没有固定标签，那么占位符就要满足最低对比度要求。（对比度4.5）其他设计点2.如果表单没有固定标签，那么占位符就要满足最低对比度要求