当字体太小或它们难以辨认时，当太多的干扰或空白不足时，许多人会离开网站而无需三思 。
网站跳出率高通常是由于网站的可视性差所致。
早期放弃的最常见原因之一是选择不当的配色方案，这些方案降低了内容的可读性 。
视障人士对颜色的看法不同，因此，如果我们想为客户提供一个易于访问且用户友好的网站，那么避免在我们的设计中避免低色差是不可避免的。
根据世界卫生组织的统计 ，全世界约有2.85亿视力障碍者，其中许多是部分或完全色盲的。
Web标准的色彩对比
值越高，越容易将前景中的对象（文本，图像，图形）与背景区分开。
色彩对比度用于测量两种颜色之间的对比度差异。
色彩对比度是由W3C（万维网的主要国际标准组织）提供的公式计算的。
颜色可以以许多不同的方式进行对比，例如色调 ， 值和饱和度。
它可以采用介于1：1 （ 完全没有对比度 ，前景和背景具有相同颜色）和21：1 （仅在黑白之间存在的最大对比度 ）之间的值。
W3C最新的Web内容可访问性指南（ WCAG ）2.0为Web开发人员和内容创建者提供了可接受的颜色对比度的最低（AA级）和增强（AAA级）值的基准。
阅读诸如字幕之类的大文本要容易得多，这就是为什么它需要较低的颜色对比度的原因。
AA级别的普通文本要求至少为4.5 ：1，大文本要求至少为 3：1 。
如果文字是徽标或品牌名称的一部分，则在任一WCAG级别都没有最低颜色对比要求。
如果要达到AAA级（增强级），则需要更加谨慎地设计配色方案，因为对于普通文本而言 ，它至少需要7：1的对比度 ， 对于大 字体 ，它需要至少4.5：1的 对比度 。
如果每个前景对象与其背景之间的颜色对比度至少达到AA级，我们只能将网站称为视觉可访问的网站。
高色彩对比度的好处
通过确保更好的可读性，您不仅会吸引视觉障碍的用户，而且还会吸引在小屏幕上（例如，在智能手机或智能手表上），在光线不足的情况下以及在质量较低的显示器上阅读您的内容的人 。
当文本和背景之间的对比度更高时，人们的阅读速度也会更快，因此，他们很可能会花费更多的时间使他们对网站的内容感到无聊。
如果您担心应用较高的对比度会对设计的美观产生负面影响，则需要查看Contrast Rebellion Web项目，该示例通过实际示例证明仍然可以坚持使用高对比度规则具有吸引力和酷炫的设计。
检查色彩对比度的应用程序
网上有很多很棒的免费工具，可以帮助设计师检查他们网站的色彩对比度。
测试你的设计，色彩对比的最简单的方法是选择的主色调与Photoshop或合适的浏览器扩展像这样一个针对Firefox，和值复制到下面的应用程序之一。
要记住的最重要的事情是，您始终需要将前景色（例如文本色）与其周围区域 （背景色）进行比较。
1. WebAim色彩对比检查器
WebAim（Mind Web Accessibility in Mind）是一个促进Web可访问性的组织，为开发人员提供了一个简单而可靠的颜色对比检查器，以及许多其他出色的可访问性工具，例如Wave ，这是一个通用的可访问性评估应用程序，可以帮助您快速评估站点的可访问性问题 。
WebAim的颜色对比检查器会告诉您您的颜色是否通过WCAG AA和AAA测试 ，无论是普通文本还是大文本。
2. Snook颜色对比检查
Snook的应用程序允许您使用方便的范围滑块来逐一更改前景色和背景色的HSL和RGB值 ，直到获得符合WCAG 2.0基准的结果。
目前在Shopify担任前端前端开发人员的乔纳森·斯努克（Jonathan Snook）主持了他方便的颜色对比检查工具已有十多年了。
CheckMyColours
由乔瓦尼·斯卡拉 （ Giovanni Scala）创建的CheckMyColours允许您检查实时网站上所有前景与背景颜色组合的颜色对比度。
CheckMyColours的报告可以极大地帮助您了解如何改善网站的视觉可访问性。
它计算亮度对比度，亮度差和色差 ，并为您提供有关结果的完整报告。
配色方案设计师
该应用程序具有称为Paletton的更新版本，该版本甚至可以进行更复杂的视觉模拟（您也可以测试糟糕的LED显示屏或弱CRT显示屏等）。
您可以测试您的颜色是否有全色盲，泛色，氘代和其他许多视觉障碍。
我们将其包含在此集合中，因为它具有一项功能，可让您查看不同类型的视觉障碍人士如何看待您的配色方案。
W3C还为您提供了庞大的Web辅助功能评估工具列表 ，您可以在其中找到许多其他颜色对比工具，例如此有用的辅助功能色轮 。
创建视觉可访问的网站的提示
根据其当前状态更改其颜色的图标就是典型示例。
如果您想创建一个视觉上可访问的网站 ，最好避免单独使用颜色来传达功能或含义 。
如果可能，请始终设计其他视觉提示 ，以帮助看待颜色不同的人们理解功能。
号召性用语的可访问颜色 对于获得良好的转化率也至关重要 。
如果用户不能轻松地在您的网站上导航，您将很快失去他们。
不要忘记特别注意按钮，链接和菜单的颜色对比 ，因为它们是您网站上的导航方式。
在设计过程中尽早测试色彩对比度是一个很好的工作流程实践，因为很难说服客户在设计过程的后期更改站点的配色方案。
现在阅读：
翻译自: https://www.hongkiat.com/blog/high-contrast-color-design/