色彩的对比度和饱和度_使用高色彩对比度进行更方便的设计

网站跳出率高通常是由于网站的视觉可访问性差所致。 当字体太小或它们难以辨认时，当太多的干扰或足够的空白时，许多人会离开网站而无需三思 。

早期放弃的最常见原因之一是选择不当的配色方案，这些方案降低了内容的可读性 。

根据世界卫生组织的统计 ，全世界约有2.85亿视力障碍者，其中许多人部分或全部患有色盲。 视障人士对颜色的看法不同，因此，如果我们想为客户提供一个易于访问且用户友好的网站，那么避免在我们的设计中避免低色差是不可避免的。

Web标准的色彩对比

色彩对比度衡量两种颜色之间的对比度差异。 值越高，越容易将前景中的对象（文本，图像，图形）与背景区分开。

颜色可以以许多不同的方式进行对比，例如色调 ， 值和饱和度。 色彩对比度是由W3C（万维网的主要国际标准组织）提供的公式计算的。

它可以采用介于1：1 （ 完全没有对比度 ，前景和背景具有相同颜色）和21：1 （仅在黑白之间存在的最大对比度 ）之间的值。

W3C最新的Web内容可访问性指南（ WCAG ）2.0为Web开发人员和内容创建者提供了可接受的颜色对比度的最低（AA级）和增强（AAA级）值的基准。

AA级别的普通文本至少需要4.5：1的比例 ，大文本至少需要3：1的 比例 。 阅读大文本（如字幕）要容易得多，这就是为什么它需要较低的颜色对比度的原因。

如果要达到AAA级（增强级），则需要更加谨慎地设计配色方案，因为普通文本至少需要7：1的对比度 ，大 字体需要 4.5：1的 对比度 。 如果文字是徽标或品牌名称的一部分，则在任一WCAG级别都没有最低颜色对比要求。

如果每个前景对象与其背景之间的颜色对比度至少达到AA级，我们只能将网站称为视觉可访问的网站。

图片：威斯康星大学麦迪逊分校追踪中心

高色彩对比度的好处

通过确保更好的可读性，您不仅会吸引视觉障碍的用户，而且还会吸引在小屏幕上（例如在智能手机或智能手表上），在光线不足的情况下以及在质量较低的显示器上阅读您的内容的人 。

当文本和背景之间的对比度更高时，人们的阅读速度也会更快，因此，他们很可能会花更多的时间使他们对网站的内容感到无聊。

如果您担心应用较高的对比度会给设计的美观带来负面影响，则需要查看Contrast Rebellion网站项目，该示例通过实际示例证明仍然可以坚持使用高对比度规则具有吸引力和酷炫的设计。

图像：对比反叛

检查色彩对比度的应用程序

网上有许多很棒的免费工具，可以帮助设计人员检查其网站的色彩对比度。

测试你的设计，色彩对比的最简单的方法是选择的主色调与Photoshop或合适的浏览器扩展像这样一个针对Firefox，和值复制到下面的应用程序之一。

要记住的最重要的事情是，您始终需要将前景色（例如文本色）与其周围区域 （背景色）进行比较。

1. WebAim色彩对比检查器

WebAim（Mind Web Accessibility in Mind）是一个促进Web可访问性的组织，为开发人员提供了简单而可靠的颜色对比检查器以及许多其他出色的可访问性工具，例如Wave ，这是一个通用的可访问性评估应用程序，可以帮助您快速评估站点的可访问性问题 。

WebAim的颜色对比度检查器会告诉您，对于普通文本和大文本， 颜色是否通过WCAG AA和AAA测试 。

2. Snook颜色对比检查

目前在Shopify担任前端前端开发人员的乔纳森·斯努克（Jonathan Snook）主持了他方便的色彩对比检查工具已有十多年了。 Snook的应用程序允许您使用方便的范围滑块一次更改前景和背景色的HSL和RGB值 ，直到获得符合WCAG 2.0基准的结果。

CheckMyColours

由乔凡尼·斯卡拉 （ Giovanni Scala）创建的CheckMyColours允许您检查实时网站上所有前景与背景颜色组合的颜色对比度。

它计算亮度对比度，亮度差和色差 ，并为您提供有关结果的完整报告。 CheckMyColours的报告可以极大地帮助您了解如何改善网站的视觉可访问性。

配色方案设计师

我们将其包含在此集合中，因为它具有一项功能，可让您查看不同类型的视觉障碍人士如何看待您的配色方案。 您可以测试您的颜色是否有全色盲，泛色，氘代和其他许多视觉障碍。 该应用程序具有称为Paletton的更新版本，该版本甚至可以进行更复杂的视觉模拟（您也可以测试糟糕的LED显示屏或弱CRT显示屏）。

W3C还为您提供了庞大的Web辅助功能评估工具列表 ，您可以在其中找到许多其他颜色对比工具，例如此有用的辅助功能色轮 。

创建视觉可访问的网站的提示

如果您想创建一个视觉上可访问的网站 ，最好避免单独使用颜色来传达功能或含义 。 根据其当前状态更改其颜色的图标就是典型示例。

如果可能，请始终设计其他视觉提示 ，以帮助看待颜色不同的人理解功能。

不要忘记特别注意按钮，链接和菜单的颜色对比 ，因为它们是您网站上的导航方式。 如果用户不能轻松地在您的网站上导航，您将很快失去他们。 号召性用语的可访问颜色 对于获得良好的转化率也至关重要 。

在设计过程中尽早测试色彩对比度是一个很好的工作流程实践，因为很难说服客户在设计过程的后期更改站点的配色方案。

现在阅读：

翻译自: https://www.hongkiat.com/blog/high-contrast-color-design/