确保你的文字符合颜色对比标准

你可能喜欢在更暗的背景下巧妙地使用深色文字——但它很可能对大多数访问你网站的人来说是难以辨认的，尤其是那些有视觉障碍的人。把包容性和可访问性放在你的设计选择的最前面，并使用颜色选择器中的颜色对比检查器，以确保所有人都能阅读你的文本。

在这节课中，你将学习关于颜色对比检查器的所有知识:

1. 了解良好的颜色对比度的重要性
2. 检查你的颜色对比度
3. 调整颜色对比度
   

参加的整个访问过程．

了解良好的颜色对比度的重要性

文字和背景之间充分的颜色对比可以为所有人，特别是视觉障碍者，改善网站的体验、可访问性和可读性。WCAG提供了建议比率基于文字大小的最佳对比。对比度是两种颜色之间亮度(或亮度)的差异，范围从1:1(例如，白底白字)到21:1(例如，白底黑字)。

AA颜色对比指南(最低)

• 文字和图像的比例应该是4.5:1
• 较大的文本(18号或14号粗体)需要3:1的比例

AAA颜色对比指南(增强版)

• 文字和图像的比例应该是7:1
• 较大的文本(18号或14号粗体)需要4.5:1的比例
  

注意:虽然WCAG的对比度准则不适用于图像(包括logo)，但对于文本突出的图像，最好采用4.5:1的比例。但是请记住，文字的图像对于有视觉障碍的访问者来说是很难理解的，通常是不可能理解的——尽可能使用样式文本。

检查你的颜色对比度

充分的对比度取决于前景(你的文本)和背景颜色(文本出现的纯色背景)、字体大小和字体重量。你可以使用Webflow内置的颜色对比检查器来检查网站上文本的对比度，并在需要时进行修复。您可以直接从Webflow中的颜色选择器完成此操作，它不仅显示文本的对比度，还显示与该对比度对应的WCAG级别评级。

注意:颜色对比检查器不分析您的文本元素与图像元素的对比(例如，如果您的文本放在图像的顶部)。

查看文本的对比度:

1. 选择文本元素你要检查一下
2. 开放风格的面板>排版
3. 单击文本元素的色卡打开颜色选择器
4. 引用对比度部分的颜色选择器来确定你的文本的WCAG级别评级(例如，失败，AA或AAA)。

WCAG级别的评级基于背景的颜色和字体的大小、重量和颜色，这在单击问号图标时打开的辅助文本中有解释。(此对比度部分仅在编辑文本元素的字体颜色时出现。)

查看文本元素的对比度辅助文本:

1. 选择文本元素你要检查一下
2. 开放风格的面板>排版
3. 单击文本元素的色卡打开颜色选择器
4. 按对比度“问号”图标

调整颜色对比度

如果你的文本显示它没有达到WCAG的对比度等级(失败)，你可以将文本颜色更改为对比度更高的颜色。当你更新你的文本颜色时，你将看到AA(最低通过)或AAA(甚至更好)的评级。

您还可以单击对比度眼睛图标，以显示您在前景色和任何纯背景色之间达到AAA、AA和失败对比度标准的范围。

查看你的文本颜色的WCAG评级范围:

1. 选择文本元素你要检查一下
2. 开放风格的面板>排版
3. 单击文本元素的色卡打开颜色选择器
4. 切换的“眼睛”图标在对比度部分的最右边打开和关闭查看WCAG评级范围

比率范围模式是通过测试每一个组合的饱和度和亮度的色调和不透明度计算-曲线移动，因为你调整色调或不透明度。深色背景上的浅色文本将在调色板的左上角显示AAA评级，右下角显示Fail评级，反之亦然。

有趣:颜色对比分析仪使用一种算法来计算两种颜色之间的光度差(对比度)，并根据WCAG的文本大小指南对其进行评级。该算法对字体权重进行了调整，因为粗体文本可以更小，但仍然可读。较小的文本需要较高的亮度差才能读懂。

了解更多关于色彩对比的重要性在这一节我们Webflow大学关于高级网页排版的视频课和阅读如何让你的网站更容易访问．

WCAG引用:成功标准1.4.3:对比(最小值)，成功标准1.4.6:对比(增强)，成功标准1.4.5:image of Text