回到所有的课程
课程库

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

在颜色选择器中使用Webflow的颜色对比检查器,以确保您的文本符合可访问性标准,并且在背景下清晰可辨。

这个视频展示了一个旧的用户界面。更新版本即将到来!
克隆这个项目

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

在这节课中,你将学习关于颜色对比检查器的所有内容:

  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对比度“失败”评级。

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

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

  1. 选择文本元素你想检查一下
  2. 开放风格的面板>排版
  3. 点击文本元素色卡打开颜色选择器
  4. 按对比度“问号”图标
颜色对比度检查器突出显示“问号”图标,可以按下该图标阅读助手文本。
在“颜色对比度检查器”中突出显示辅助文本。

调整颜色对比度

如果您的文本显示它没有达到WCAG的对比度评级(Fail),您可以将文本颜色更改为对比度更高的颜色。当你更新你的文本颜色,你会显示一个评级AA(最低通过)或AAA(甚至更好)。

黑色背景下的中等灰色标题显示WCAG对比度评级为AA(最低通过)。
黑色背景下的浅灰色标题显示WCAG对比度评级为AAA(最高评级)。

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

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

  1. 选择文本元素你想检查一下
  2. 开放风格的面板>排版
  3. 点击文本元素色卡打开颜色选择器
  4. 切换的“眼睛”图标在对比度部分的最右边打开和关闭,查看WCAG评级范围
颜色对比检查器通过单击颜色选择器中的“眼睛”图标显示AAA到Fail之间的比率范围模式。

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

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

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

WCAG引用:成功标准1.4.3:反差(最小)成功标准1.4.6:对比(增强)成功标准1.4.5:文本图像

尝试Webflow-是免费的
Baidu
map