文字与背景对比度检测 (WCAG标准)

基于 WCAG 2.1 无障碍指南检测文本与背景对比度，确保明暗背景下的可读性与无障碍设计合规。

前景色 / 文本颜色

背景色

14.62 : 1

对比度极佳——完全符合 WCAG AAA 顶级标准。

预览标题文字

这是常规正文样本，用于展示文字在选定背景色下的清晰度和无障碍可读性。

WCAG 等级与元素类型	对比度标准	合规状态
常规文本 (AA)	≥ 4.5 : 1	达标
大号文本 (≥ 18pt / 14pt 粗体) (AA)	≥ 3.0 : 1	达标
UI 控件与图形图标 (AA)	≥ 3.0 : 1	达标
常规文本 (AAA)	≥ 7.0 : 1	达标
大号文本 (AAA)	≥ 4.5 : 1	达标

嵌入此工具到你的网站 / 博客无需开发 · 复制即可使用

<iframe src="https://lucentool.com/zh/color-contrast-checker" width="100%" height="650" style="border:1px solid #e5e0d8;border-radius:12px;max-width:850px;width:100%;" frameborder="0"></iframe>
<div style="font-size:12px;color:#78716c;margin-top:6px;font-family:sans-serif;">Powered by <a href="https://lucentool.com/zh/color-contrast-checker" target="_blank" style="color:#c85a32;text-decoration:none;">Lucentool - 文字与背景对比度检测 (WCAG标准)</a></div>

HTML 嵌入代码 (iframe):

<iframe src="https://lucentool.com/zh/color-contrast-checker" width="100%" height="650" style="border:1px solid #e5e0d8;border-radius:12px;max-width:850px;width:100%;" frameborder="0"></iframe>
<div style="font-size:12px;color:#78716c;margin-top:6px;font-family:sans-serif;">Powered by <a href="https://lucentool.com/zh/color-contrast-checker" target="_blank" style="color:#c85a32;text-decoration:none;">Lucentool - 文字与背景对比度检测 (WCAG标准)</a></div>

理解 WCAG 色彩对比度标准

Web 内容无障碍指南（WCAG）2.1 明确规定了不同层级界面的色彩对比度，保障低视力及色觉障碍用户的正常阅读与交互体验。

标准要求速查

WCAG AA（基础合规）：常规正文（小于 18pt/24px 或 14pt/18.5px 粗体）至少需达到 4.5:1；大号文本与核心 UI 控件需达到 3:1。
WCAG AAA（增强合规）：常规文本需达到 7:1，大号文本需达到 4.5:1。
相对亮度计算：依据国际照明委员会 CIE 推荐的标准 sRGB 空间伽马校正与加权相对亮度公式计算。

文字与背景对比度检测 (WCAG标准)

预览标题文字

理解 WCAG 色彩对比度标准

标准要求速查

相关推荐与高频工具