提高网站用户体验的最重要方面之一是确保您的文本可读。创建可读的文本意味着确保你网站建设中的文本颜色和背景颜色有足够的颜色对比。

例如，在白色背景上查看紫色文本。比较水平很好：

然而，如果我们使文本变浅，我们可以很快达到对比度低、难以阅读的程度：

现在，调整后的相同文字的对比度不好

这可能是一个相对简单的概念，但实际上很难确保足够的比较。有时颜色对比看起来不错，但实际上可能达不到标准。那么，如何确定我们的颜色对比度对可访问性友好呢？这就是Chrome DevTools有帮助的地方。

Chrome DevTools如何提供帮助

你会注意到我们在屏幕截图上看到的Chrome DevTools颜色选择器。如果仔细观察，您还可以看到颜色选择器中还有其他信息，如显示对比度得分，这有助于提供颜色选择的反馈。这是最近在Chrome辅助功能工具的一部分——让我们看看它是如何工作的。

注意：你可能会在网上看到一些解释，说你需要使用它"开发人员实验"使用这些颜色对比检查功能，但现在不再是这样了。目前，该功能已内置到Chrome和Chromium中。

访问比度检查器工具

首先打开Chrome / Chromium DevTools，然后在HTML选择任何文本元素。然后，在"样式"在选项卡中找到color属性，并单击右侧的小色样打开选择器工具。

在以下红色正方形突出的区域，你会看到文本元素的对比度分为5.00。该分数来自于检测背景元素的颜色，并将其与文本的颜色进行比较。

你还会注意到分数旁边有两个绿色的钩子，表示对比度在可访问性可接受的参数之内。

基本比率得分很有用，但要访问所有颜色对比工具，请单击对比度得分右侧的向下箭头。当你把鼠标挂在上面时，它会显示一个工具提示，显示更多。

我们可以通过扩展本节获得一些其他信息。在这里，你会看到理想的比较分数，你应该尝试达到理想的分数，更高的数字代表更强的比较。3.0到4.5之间的分数表示为" AA"，而4.5或更高的分数表示为" AAA"，是理想的。

不要越界

还会注意到，一旦全色对比工具展开，颜色选择器顶部就会出现一条线。至少是这样" AA"等级的文字颜色与不符合标准的文字颜色之间的界限。

注意：你可以非常接近这条线，从" AAA"评级转换为" AA"，保持在3.0以上但低于4.5：

然而，银行上方的所有内容都将标有红色警告符号，以告诉您颜色组合带来的可访问性问题：

Alpha值调整

你也可以在色相滑块下移动Alpha滑块，并且"安全"偏移以表明增加的透明度：

哪一边？

另一件需要注意的事情是，你希望文本的颜色落在线的一侧可以根据背景颜色反转。

另一件需要注意的事情是，你希望文本的颜色落在线的一侧，并根据背景的颜色进行逆转。如果你的文本是深色的，你希望文本的颜色显示在线条上方。若文字为浅色背景，则其颜色应低于该线。

下面，我们看到了这个反演的例子，左边是深色背景，右边是浅背景。还预览了文本和背景颜色"显示更多"找到开关下方的圆圈Aa：

总结

Chrome和Chromium这些颜色对比检查工具将在设计过程中大大简化，以确保可读性。我们需要做的是快速检查每种文本颜色，必要时使用颜色选择器进行调整，然后将新颜色集成到我们的代码中。