确保每个文档的前景色和背景之间有强烈的颜色对比, 幻灯片, 和网页. 总是使用颜色加上另一个视觉指标(例如, 颜色加粗体或颜色加大小)来传达重要信息.

了解一点点关于颜色和对比的知识可以帮助你在文档中更有效地交流, 网页, 和演示. 这个主题不仅仅适用于平面设计师和艺术家——颜色是视觉传达中最强大和最常被滥用的方面之一.

影响

当你设计你的文档和网页时，仅仅因为它看起来是一种方式并不意味着它也会是你的受众.

  • 屏幕放大镜等自适应技术的用户可以通过以下方法改变个人显示器上的颜色外观, 启用高对比度模式.
  • 有些用户可能站在明亮的阳光下看你的内容.
  • 有些人可能使用的是带有不同颜色校准设置的旧电脑显示器. 

例子

三大色盲类型饼图
这是一个饼状图，显示了使用蓝色的前三种色盲的患病率, 粉红色的, 绿色编码可能适合色盲患者. 来源:色盲的类型(colblindor)

注意事项

RGB和CMYK都是平面设计中混合颜色的模式. 作为一个快速的参考, RGB(红色, 绿色和蓝色)的颜色模式是最好的数字工作, 而CMYK(青色, 品红色的, 黄色的, 黑色)用于印刷材料.

虽然您永远无法控制(或知道)您的用户看到什么，但您可以遵循以下简单的规则.

应该:用颜色和其他线索来显示强调或区别

颜色不应该是传达信息的唯一手段. 如果您对文档进行颜色编码(e.g., 蓝色标注的部分是我对你的问题的回答,)，你的一部分读者将很难找到新的信息. 屏幕阅读器不提供按颜色搜索的方法, 在各种条件下或在特定环境下的人也看不出区别.

这些人包括:

  • 色盲
  • 视力低下
  • 有与年龄有关的视力问题，如黄斑变性
  • 使用显色不正确或不完美的显示器
  • 试图站在光天化日之下用手机阅读你的材料

Do

使用颜色加上另一个元素来强调一点或从视觉上区分信息差异:

  • 大胆的
  • 大小
  • 图案或形状
  • 光环(亮点)
饼状图显示了前三种色盲的患病率:氘核异常超过一半, 约占三分之一, 原视盲是最不常见的(来源:http://www.没有种族偏见.com/2010/03/09/types-of-没有种族偏见)
饼状图显示了前三种色盲的患病率:氘核异常超过一半, 约占三分之一, 原视盲是最不常见的(来源:http://www.没有种族偏见.com/2010/03/09/types-of-没有种族偏见)

不

不要只用颜色来强调一个观点或显示信息的差异.

不要用颜色加下划线来强调(看起来像一个超链接).

不要用颜色加斜体来强调(大量阅读会有困难).

饼状图显示了前三种色盲的患病率, 蓝色, is more than half; deuteranopia, 彩色的粉红色, is about a third; and protoanopia, 染成绿色, 是最不普遍的
饼状图显示了前三种色盲的患病率, 蓝色, is more than half; deuteranopia, 彩色的粉红色, is about a third; and protoanopia, 染成绿色, 是最不普遍的
来源:色盲类型(http://www.没有种族偏见.com/2010/03/09/types-of-没有种族偏见)

应该:使用相互强烈对比的颜色

色彩对比是用明暗之比来衡量的, 一种颜色的亮度与它上面的颜色的暗度形成对比. WCAG 2.0指南根据字体文本的大小和粗细指定不同的对比度, 如:

  • 14分以下的正常文本为3:1
  • 4.5:1用于14点粗体或18点非粗体文本

Do

如果你不确定你的背景色和前景色是否有足够的对比, 您可以使用颜色可访问性检查器来比较这两种颜色, 比如 webaim.Org颜色对比检查器. 为了执行此检查，您需要知道颜色的十六进制值.

例子:

这个截图显示了webaim.org颜色对比检查器比较符合WCAG 2的两种颜色(纯蓝色文本在纯白色背景上).所有级别和文本大小的颜色对比度为0, 因为对比度大于7比1
这个截图显示了webaim.org颜色对比检查器比较符合WCAG 2的两种颜色(纯蓝色文本在纯白色背景上).所有级别和文本大小的颜色对比度为0, 因为对比度大于7比1
来源:对比检查器(WebAIM)

不

不要使用没有通过WCAG 2的背景色和前景色.0的指导方针.

例子:

这个截图显示了webaim.org颜色对比检查器比较两种颜色(纯白色背景上的淡紫色文本)失败的WCAG 2.所有级别和文本大小的颜色对比度为0, 因为对比度小于3比1
这个截图显示了webaim.org颜色对比检查器比较两种颜色(纯白色背景上的淡紫色文本)失败的WCAG 2.所有级别和文本大小的颜色对比度为0, 因为对比度小于3比1
来源:对比检查器(WebAIM)