使网站易于访问是设计师工作的基本部分。可访问性的一个方面是确保文本和背景颜色有足够的对比度，以使文字可见和易读。

为什么要使用颜色对比分析仪

仅仅因为你能阅读文本，并不意味着大多数人都能。你的颜色对比度需要让低视力、视力障碍和不同类型色盲的访问者能够清楚地阅读文本。

Web Content Accessibility Guidelines (WCAG)指定了一种计算文本颜色和背景颜色之间对比度的方法。指南为级别AA(最低)、级别AAA(增强)和失败评级指定了成功标准。

不幸的是，您不能仅通过查看颜色来检查比例—您需要一个颜色对比分析工具。

我们如何以及为什么要建立Webflow颜色对比分析仪

为了在设计时将这种颜色对比信息放在最前面，已经构建了许多工具，但Webflow设计人员还没有现成的工具。它们以独立的网页、插件和浏览器页面检查器的形式存在。

前Webflow产品设计师Da欧宝体育在线首页rin Dimitroff的灵感来自Chrome DevTool颜色对比检查器。他决定用自己10%的时间——每周分配给Webflow员工的4个小时来做梦想的项目——直接在Webflow中设计一个颜色对比工具。

达林有了一个基本设计后，就向高级前端工程师尼克·加德(Nick Gard)提交了一份方案。Darin的设计结合Nick对需要更改的代码区域的知识，使团队能够将这个想法带进构建阶段。

从Darin从Chrome DevTools特性中获得的灵感中，Nick深入研究了驱动该实现的代码，并从中了解了需要数周的试错和代码重构才能完成的工作。

他们都不希望颜色对比分析仪仅仅停留在一个最小可行产品(MVP)。欧宝体育在线首页因此，在接下来的几周里，他们用10%的时间编写测试，重新检查图像设计，敦促同事们测试和审查它，并最终使它达到可以发布的程度。

如何在Webflow中使用颜色对比分析器

你可以直接从Webflow的颜色选择器中计算文本的颜色对比度。

查看文本的对比度:

• 选择要检查的文本元素
• 打开样式面板>排版
• 单击文本元素的颜色样本打开颜色选择器

在颜色选择器中，您将看到AA级、AAA级或失败的对比度。您还可以通过颜色框拖动光标，以查看哪些区域将满足成功标准，哪些将失败。

开始使用色彩对比分析仪建立更容易访问的网站

有关颜色对比度的更多指导，请查看Webflow大学色彩对比课．

如果你想知道更多关于如何使你的网站更容易访问，你应该查看我们的可访问性检查表．如果你对改进我们的网络建设充满热情，考虑加入我们的团队。