数字营销
加载的结果……
为什么符合标准的颜色很重要
在这篇文章中，我将讨论颜色有时是如何妨碍信息传递的，以及我们可以遵循的简单实践，以确保这种情况不会发生。也许一个好的前端设计对你来说已经不是秘密了可用性和可访问性．这可以理解为，内容是有组织的，可读的，对每个浏览网页的人来说都是可以理解的，不管他们可能有任何障碍。简而言之，这就是网络标准的意义所在。
如果不遵守这一规定，你的网站可能会失去数百万的访问者。是的,数百万．至少有1000万美国男性受某种形式的色盲影响的人(约占美国人口的7%)
男性人口)。他们每天都在网上冲浪。如果你的网站上的重要内容用他们无法分辨的颜色组合呈现，你就不能有效地传递信息。
如果你正在处理的网站是一个电子商务网站，沟通失败将会是更灾难性的，因为它会导致收入损失。将这一事实推给全球观众(不仅仅是美国的男性大众)——你困惑的客户可能会激增到数百万人。当你毫无顾忌地使用颜色时，你失去的不仅仅是色盲。
如果您的网站内容和背景之间的对比不足，即使是普通的、20多岁的、持有信用卡的观众也可能在您的网站上有不愉快的体验。你会在不知不觉中造成眼睛疲劳——尤其是对那些不戴老花镜的盲人来说。所以让我们继续，再增加数百万受颜色使用不良影响的人。
值得庆幸的是,W3C制定标准来解决这些和类似的问题。1999年，他们发布了WCAG(Web Content Accessibility Guidelines) 1.0版本，在2008年被WCAG 2.0所取代。
WCAG什么?
的WCAG是:
“……一套指导方针，主要针对残疾用户，但也针对所有用户代理，包括高度受限的设备，如移动电话。”
换句话说，这些文档定义了什么的限制是而且不是就公众应该如何提供内容而言，在网络上是可以接受的。这些标准确保从屏幕阅读设备到移动电话，所有人都可以访问内容——无论是文本、音频还是视频形式的内容，而不考虑任何残疾或用户代理。
此外，这些准则分为三个优先级别:
- 优先级1:Web开发人员必须满足这些要求，否则一个或多个组将无法访问他们的web内容。
- 优先级2:Web开发人员应该满足这些要求，否则一些群体会发现很难访问网络内容。
- 优先级3:Web开发人员五月满足这些要求，以使某些群体更容易访问web内容。
第508节
一组类似的web标准被封装在第508节(或电子和信息技术可访问性标准)-对美国法律制定的普遍获取IT的修正案。部分基于WCAG 1.0的建议，它要求联邦机构为残疾雇员和公众提供与其他人相当的信息访问权限。
随着我们的学习，我们将会看到关于如何在网络上正确使用颜色的标准。现在，让我们从颜色组合开始，深入研究一下我上面提到的两个主要问题。
组合颜色会绊倒色盲
请看下面的图表:
如果你没有色觉问题，你就会很清楚有多少人是色盲;他们占美国男性的1 / 14。
然而，如果是色盲，上面的图表实际上是这样的:
不是很有用，对吧?第二张图是对前一幅图的模拟(通过Vischeck完成)，就像有人在看一样绿色盲(红/绿色盲，这是最常见的色盲类型)。正如你所看到的，对你来说很清楚的东西可能会让色盲感到困惑。
当我们不了解色盲以及受色盲影响的人如何感知某些颜色时，这个类似的问题就会突然出现。
色盲的类型
我已经用Vischeck测试了一张饼状图的图片，Vischeck是一个可以模拟色盲视觉的网站，甚至可以对图片进行daltonize。
一个饼状图的例子，有不同的颜色，由不同类型的色盲观看。这里，你可以看到有三种类型的色盲:
- 绿色盲(感知绿色的问题)
- 红色盲(感知红色的问题)
- 蓝色盲(无法感知黄蓝色)
然而，看看模拟的结果，你会发现我们基本上可以把它们分为两类:
- 红绿色盲症
- 瞳色盲
红绿色盲更为常见，大约影响了7%的美国男性人口(或约1 / 14的男性)，而黄蓝色盲仅影响0.5%。饼状图(它概括了几年前不同社交网站的市场份额)显示，红色和绿色看起来非常类似于氘烷或原烷。
这一群体中的一些成员(主要是原色)还认为红色是深色，最终与深灰色和黑色色调难以区分(参见原色模拟)。对于三面虫来说，色觉问题似乎不那么明显，因为我们不会混淆蓝色和黄色。然而，这些颜色的原始色相值仍然有显著的变化，在某些情况下，这对那些人来说仍然是有问题的。
看看我们上面所做的，你可能会觉得让你的设计在发布之前进行模拟太麻烦了。不过，你还有另一种选择:只要遵循标准，你就不必费心担心你的颜色组合是否会给色障人士带来问题。
如何坚持色盲标准
这里有三个建议，只有第一个是必要的(也是标准所提倡的唯一一个)。
然而，如果您对标准的遵从性很着迷，那么您可能会考虑采用后两种方法——它们只能帮助您的用户。
在传达信息时，不要只使用颜色
这里最重要的词是独自一人．WCAG 1.0、WCAG 2.0和第508节都要求信息不仅要通过颜色来传达。
第508条规定:
“网页的设计应使所有用颜色传达的信息在没有颜色的情况下也可以使用，例如来自上下文或标记的信息。”
优先级1,WCAG 1.0的检查点2.1几乎有相同的措辞:
“确保所有用颜色传达的信息在没有颜色的情况下也是可用的，例如来自上下文或标记。”
就在这里停下来，消化这一点信息。这个建议是优先级1，所以你必须满足它。没有如果或者但是。
最后，WCAG 2.0也说了同样的事情:
“任何用颜色传达的信息在没有颜色的情况下也能在视觉上清晰可见。”
如果我们回到我们的第一个图表，你会发现我们可以通过使用额外的线索来表达它——这些线索即使没有颜色也能使它的意思清楚。这些线索可以是一个更清晰的标题或图表的摘要(例如，让观众知道这是1 / 14的美国男性)，或者添加纹理(人物和图例上的对角线)。
通过添加对角线修正图表。如果我们在vischeck模拟器上运行这个图像，deuteranope或protanope将没有问题解释它:
色盲模拟。我们也可以把这个原则应用到饼图中。我们不需要创建一个图例来显示饼的哪个部分是哪个部分，而是去掉图例，简单地将社交网站的名称放在它的部分上面(这样就不需要将该部分的颜色与对应的框相匹配)。
通过显示每个切片的名称来更正饼图。
不要把有问题的颜色放在一起使用
我们上面的模拟表明，根据色盲类型的不同，其他色调会相应地取代原来有问题的颜色。
也就是说，对于氘烷或原烷，红色和绿色变成棕色(绿色有较浅的色调)。对于三棱蛇来说，黄色会变成粉红色，而蓝色会显得更浅。因此，您可以想象这样一种情况，其中您为设计的颜色主题所选择的颜色正是这些颜色(红色、绿色和棕色;或者黄色、粉色和蓝色)，并排使用它们会产生一种“混合效果”——红色和绿色混合成棕色或灰色的阴影，因为棕色和灰色保留了它们的颜色。
如果您将这些颜色单独组合来传达信息(如我们的图表示例)，或者作为文本和背景的颜色，那么显然您将做出一个不明智的设计决定。完全不使用这些有问题的颜色当然也是一个选择，如果你的主题颜色不是一成不变的，我们的第三个建议是适用的。
daltonized你的设计
“……由计算机执行的一种过程，使色觉缺陷的人能够区分他们否则无法感知的一系列细节。”
应用道尔顿化可以改变给定图像或设计的颜色，这样其中的颜色就不再对色障者造成任何问题。
(顺便说一下，这个过程是以英国科学家约翰·道尔顿(John Dalton)的名字命名的，他在注意到自己看待事物的方式的差异后，第一个提出了色盲的存在，他自己就是色盲。)我已经通过Vischeck的Daltonize页面对我们的原始图形进行了Daltonize。看看下面的结果。
Daltonization模拟。我们的daltonized图像表明，实际上，我们可以“逃脱”不遵循不使用颜色单独传达信息的建议，只要我们daltonized我们的设计。
这当然是极端的措施当我们创建可用和可访问的设计时，我们的目标是在不影响任何人体验的情况下具有包容性。正如你所看到的，如果你喜欢走这条路，你应该准备使用一些时髦的颜色主题。
背景/前景对比度不足
在这两个颜色问题中，前景对象(如文本)和背景之间的对比度不足更有问题，因为很多网页设计师都这样做，每个人都暴露在它面前。
我敢肯定，你不难看出我下面创建的拼贴画对比度很差(文字似乎与背景无缝融合)。
尽管整体效果可能会取悦某些人的眼睛，但当你试图阅读上面的文本时，可读性问题就变得很明显了。视力正常的人可能可以忍受，但显然我们也应该为视力差的人设计。
WCAG 1.0将足够的对比度指定为图像的优先级2和文本的优先级3:
2.2确保前景色和背景颜色组合在有色盲的人或在黑白屏幕上观看时，能提供足够的对比。[图像优先级2，文本优先级3]
为什么你认为图片比文字更重要?因为网站访问者在浏览器中放大文本或调整对比度设置(如果他们足够熟练，甚至可以在客户端调整样式表)的能力通常只适用于文本，而不适用于图像。因此，如果你的图片对比度不足，你网站上的图片信息将无法正确传达。
另外，请注意升级后的版本WCAG 2.0是具体的和可测量的:
计算亮度对比度的公式为(l1 + 0.05) / (l2 + 0.05),在那里L1亮度是较浅的文字或背景颜色，和L2是文字或背景颜色中较暗的亮度。现在，我认为讨论光度的定义对我们设计师来说有点太专业了，所以我不会在这里深入讨论(但如果你感兴趣，可以看看这个文章关于光度对比度在W3C)。只要说W3C已经确定了依赖颜色的信息的亮度对比度的最小值就足够了5:1．
对于依赖对比的信息，例如文本，它是10:1．在我们进入实现这些对比度的技术之前，让我与你分享这个Photoshop中的颜色选择器窗口，它应该能帮助我们更好地理解对比度的概念。
虽然颜色使用的第一个问题主要涉及颜色的色调，但对比度主要是通过在前景色和背景色或文本的饱和度和亮度(或明度)值之间创建一个大的差距来避免的。即使它们有相同的色调，这也是有效的。例如，前景色和背景色可以具有相同的色调值180o；然而，它们的饱和度和亮度值应该尽可能地分开(即。
100%和20%)，以确保它们有良好的对比度。有多远?标准没有具体说明，但我们有颜色对比工具来实现最小的5:1和10:1的比例是很好的。
如何坚持色彩对比标准
我们没有讨论如何计算和实现颜色对比度的最低W3C要求。但这是因为网上有工具可以让我们做到这一点。以下是其中的一些:
我将讨论后者，但它们的工作方式基本相同。此外，你可以使用Photoshop将你的设计转换为灰度(这将在后面的文章中详细介绍)，这将删除颜色的饱和度(即每一种颜色降低到其在黑-灰-白光谱中的等效值)。
这反过来会隔离亮度值，帮助你的眼睛判断你的设计是否有足够好的对比度。
颜色对比分析仪(CCA)
如上所述，至少有两个网站提供他们的CCA工具(免费)。Vision Australia的CCA工具可以作为桌面程序使用;Juicy Studio的一款网页应用和Firefox扩展。
如果你下载、安装并运行上面列出的Vision Australia的软件，你会看到类似下图的窗口。如你所见，我在Design instruction的主页上测试了文章标题的对比。
你知道吗?它以优异的成绩通过了三级考试。12.67) !
如果你看一下这个分数以下的内容，我们就会想起这些指导原则(所以你不必记住它):
文本或图表及其背景的亮度对比度必须至少为5:1，才能符合指南1.4的2级要求;文本或图表及其背景的亮度对比度必须至少为10:1，才能符合指南1.4的3级要求。
你可能想知道我在本节开始时对拼贴的网站的分数。(又来了。)他们的平均水平差不多1.5至3.5-即使是2级合规也不及格。是的，毫无疑问，这些网站既时髦又酷——但对于视力不好的人来说，它们也很麻烦。
在高对比度模式下显示
在高对比度模式下显示设计有多种方法。
Photoshop去饱和度命令
为了快速了解对比度在你的设计中是好是坏，你可以使用Photoshop的去饱和度命令(Shift + Ctrl/Cmd + U)来降低你的设计，这个动作也会去除色调，只留下亮度值。
因此，任何由色相或饱和度引起的感知差异都被取消了，只剩下对比度，这将在亮度值的差异中看到。
GrayBit
对于实时网站，有GrayBit，在那里你可以输入你的网站(或任何其他网站)的URL，并将其转换为灰度。就我们的目的而言，该服务更多地用于追溯性地修正设计。
显然，不管我们的网站在GrayBit中看起来如何，我们仍然需要应用CCA工具来确保我们的网站通过标准。下面是通过GrayBit转换的Design instruction:
正如你所看到的，Design instruction首页在“关闭”颜色的情况下看起来仍然很好。正文文本可读性很强，上面的主要导航链接也是如此。在我上面所做的拼贴画中的任何一个网站上尝试这个测试，仍然会产生正常眼睛可读的页面——但是，出于显而易见的原因，如果你关心可读性、可访问性和可用性，最好避免这些“低对比度、混合”的设计风格。
函数重于形式，这就是区别设计从艺术．
结论
所有这些可能会让你大开眼界，也可能不会，你可能会觉得它限制了你的艺术自由。请记住:设计——尤其是网页设计——不同于纯粹的艺术，因为衡量其有效性的标准不是你从行业内赞赏你的同事那里得到的“哦”和“啊”，而是一个想法或思想的成功沟通，这可以通过增加RSS订阅量或网站商品的销售来看到。
此外，正如设计指导网站所显示的那样，一个好的设计可以与标准的遵从相辅相成。这里有一些我推荐的书，可以极大地帮助你遵守标准。
| 推荐的书籍 | |
 设计无障碍网站 |
 Web可访问性:Web标准和法规遵从 |
 网页无障碍原则 |
 Web应用程序的通用设计 |
在网络的其他地方，这里有其他优秀的资源:
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
