颜色对比度检测：WCAG 2.2 AA 与 AAA 标准

使用方法

在“文字颜色”中输入文字的颜色，在“背景颜色”中输入其背后的颜色。
阅读“对比度”。四项文字检查和组件检查会说明该配对达到哪些级别。
对于正文，应以“AA，普通文字”为目标。大号文字所需对比度较低；尺寸见下方各节。
若某项检查未通过，请从“建议的文字颜色”开始，并在您的实际设计中测试结果。

对比度如何计算

WCAG 2.2 为每种颜色给出相对亮度。红、绿、蓝各分量先被线性化：值不超过0.04045（取值范围0至1）时除以12.92，较大的值则加0.055再除以1.055，然后取2.4次方。三个结果再分别按0.2126（红）、0.7152（绿）和0.0722（蓝）加权。对比度为较亮颜色的亮度加0.05，除以较暗颜色的亮度加0.05。

结果从1（两种颜色相同）到21（白底黑字）。

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L1 + 0.05) ÷ (L2 + 0.05)

L1  luminance of the lighter colour
L2  luminance of the darker colour

各级标准

WCAG 2.2 规定了以下最低对比度。列出级别和成功准则，便于您查阅确切的措辞。

AA，普通文字：4.5:1（成功准则1.4.3）。
AA，大号文字：3:1，适用于18 pt 的文字，或粗体的14 pt 文字（1.4.3）。
AAA，普通文字：7:1（成功准则1.4.6）。
AAA，大号文字：4.5:1（1.4.6）。
读者使用页面所需的按钮、边框和图标：3:1（1.4.11）。

本检测工具不涵盖的内容

照片、图像和渐变上的文字：文字之下的背景不断变化，因此应在那里检查实际像素。
透明颜色：请输入读者在页面上实际看到的颜色。
悬停、聚焦和其他状态：也应检查每种状态的颜色。
文字对读者而言是否属于大号：这取决于字号和字重，本页无从得知。

计算示例：白底上的灰色 #777

灰色 #777每个通道为255中的119，相对亮度约为0.184。白色的亮度为1，因此对比度为 (1 + 0.05) ÷ (0.184 + 0.05) = 4.48。

因此 #777配白底，普通文字的 AA 略微未达标，大号文字的 AA 与组件的3:1检查通过，AAA 未通过。能通过 AA 的、最接近的更深灰色是 #767676，对比度为4.54。

检查	需要	白底上的 #777
AA，普通文字	4.5:1	4.48：未通过
AA，大号文字	3:1	通过
AAA，普通文字	7:1	未通过
AAA，大号文字	4.5:1	未通过
按钮、边框和图标	3:1	通过

常见问题

正文文字需要多大的对比度？

对于 WCAG 2.2 的 AA 级，普通文字至少需要4.5:1，大号文字需要3:1。AAA 级要求普通文字7:1，大号文字4.5:1。

对比度为4.4999时为什么显示为4.50却仍未通过？

检查使用的是精确的对比度，而不是屏幕上显示的两位小数。略低于4.5的对比度在显示时会四舍五入为4.50，但它达不到4.5:1，因此检查未通过。

两种颜色的顺序会改变对比度吗？

不会。无论哪一种颜色是文字、哪一种是背景，对比度都相同，因为较亮的颜色始终作为分子。

建议的颜色是什么？

它是在明度上与您的颜色最接近、并且在您的背景上达到4.5:1的文字颜色。它保持相同的色相和饱和度，并且按变化较小的方向调整，即变深或变浅。

可以输入带透明度的颜色吗？

这里不可以。请输入访客实际看到的颜色，也就是透明颜色与其背后的背景混合之后的颜色。

我输入的颜色会被发送到服务器吗？

不会。计算在您的浏览器中完成，您输入的颜色既不会被保存，也不会被发送到我们或其他服务器，无需注册即可使用本页。

对比度达标就表示文字容易阅读吗？

不一定。对比度只是 WCAG 设定的最低标准。字号、字重、间距和读者的视力同样重要，因此条件允许时，请与真实用户一起测试实际设计。

资料来源

数据和文字最近核对于2026年11月10日星期二。

结果