跳至主要内容
FreeKitX

WCAG 网页色彩对比度检测与智能配色修正 - FreeKitX

收藏到浏览器

将此页保存到浏览器书签

手机端在浏览器的分享或菜单中选择“添加书签”。

专业网页无障碍对比度计算工具:依据 W3C WCAG 2.2 规范计算文本与背景对比度,即时评定 AA/AAA 级别,智能推荐合规配色。

对比度检测工具已就绪。请输入或选择配色进行检测。
免费 · 本地处理

WCAG 2.2 对比度检测器

色彩设定

经典无障碍配色预设
对比度比例优秀对比度 (达到 AAA 级)
14.63:1

依据 W3C WCAG 2.2 官方算法 (L1 + 0.05) / (L2 + 0.05) 计算的相对亮度比值,区间为 1:1 至 21:1。

常规文本✓ AA
大号文本✓ AA
图形对象与 UI 组件✓ AA

WCAG 2.2 合规性检测结果

常规文本

16px / 常规体

正文段落与输入框 (小于 18pt/24px 或小于 14pt/18.66px 粗体)

AA 级要求 (>= 4.5:1)通过
AAA 级要求 (>= 7.0:1)通过

大号文本

>= 24px / 18.66px 粗体

大标题与醒目字 (达到 18pt/24px 或 14pt/18.66px 粗体)

AA 级要求 (>= 3.0:1)通过
AAA 级要求 (>= 4.5:1)通过

图形对象与 UI 组件

SC 1.4.11

表单边框、按钮轮廓与关键图标 (WCAG 2.2 SC 1.4.11)

AA 级要求 (>= 3.0:1)通过
* WCAG SC 1.4.11 仅在 AA 级定义非文本对比度(无 AAA 级标准)。

实时渲染预览

常规正文字体排版 (16px / Regular)

良好的色彩对比度是普惠包容性网页设计的基础基石。它能确保在强光照射、微弱照明或用户存在低视力与色觉障碍时,页面内容依然清晰可辨。

大号标题字体排版 (24px / Bold)

面向所有用户的清晰易读文字排版

交互式 UI 组件 (WCAG SC 1.4.11)
状态标签

智能色彩修正与推荐助手

对比度未达标?固定前景或背景色,算法将在 sRGB 色域中沿明度轴检索,以最小色彩距离(ΔE)计算出满足所选合规目标的最佳配色。

保持固定
目标合规比例

当前配色组合已满足或超过所选的目标对比度要求! (14.63:1 >= 4.5:1)

直接答案

色彩对比度检测工具依据 W3C WCAG 2.2 官方标准精确测算文字前景色与背景色之间的相对亮度比率,评估在常规文字、大号文字与 UI 控件上的 AA 与 AAA 级无障碍达标状况。

如何使用此工具

1

输入文字色与背景色

键入十六进制 HEX 代码、RGB 或使用内置取色板选择颜色。

2

实时查看计算对比度

即时获取精确的数值对比度比率(例如 4.5:1 或 10.7:1)。

3

检查 WCAG 达标评级

系统自动核对普通正文、大号标题与非文本界面的 AA/AAA 合规性。

4

应用智能修正建议

轻触智能微调滑块,在保持原有色相的前提下自动匹配合规明度。

相对亮度与 WCAG 对比度计算标准公式

相对亮度(L)衡量 sRGB 色彩空间中各颜色通道经过伽马矫正后的感知明度,归一化在 0(纯黑)到 1(纯白)之间。对比度比率范围从 1:1(无对比)到 21:1(黑白最大对比)。

(L1 + 0.05) / (L2 + 0.05) (其中 L1 为较亮色相对亮度,L2 为较暗色相对亮度)
  • WCAG AA 级标准:普通字号正文对比度需达到 4.5:1,大号文字(>=18pt 或 14pt 加粗)需达到 3.0:1。
  • WCAG AAA 级标准:普通正文需达到 7.0:1,大号文字需达到 4.5:1,专为低视力用户提供最佳可读性。
  • 非文字交互元素(如表单输入框边框、聚焦指示环、图标按钮)需满足至少 3.0:1 的界面对比度。

实用示例

测试深灰文字在浅灰背景上的可读性

输入: 文字颜色:#1f2937,背景颜色:#f3f4f6

输出: 对比度比率:10.7:1(全面通过 WCAG 2.2 AA 及 AAA 级无障碍全部标准)

为企业设计系统与政府公共服务网站提供符合法定数字无障碍要求的科学依据。

限制

  • WCAG 算法针对单色实底背景进行数学测算;对于背景为复杂照片或多色弥散渐变的情况,需选取对比最弱的局部区域测算。

常见问题

为什么普通正文必须达到 4.5:1 的对比度基线?

4.5:1 是国际公认的保障中度视力受损人群及在室外强光照射下普通人群均能无障碍识读文字内容的科学阈值。

如果我选定的品牌主色对比度不达标,该如何修正?

工具提供“智能修正”功能,在尽可能锁定原有色相与饱和度的前提下微调明度,一键生成最接近的合规配色方案。

权威技术标准与参考文献