WCAG 颜色对比度检测
实时计算前景色与背景色的 WCAG 对比度比值，标注 AA / AAA 通过状态，并以按钮、卡片、输入框组件预览效果。支持导出 CSS 变量。
Contrast ratio
21.00:1
WCAG 2.2 results
| Category | AA | AAA |
|---|---|---|
| Normal text | Passneed 4.5:1 | Passneed 7:1 |
| Large text (≥18pt) | Passneed 3:1 | Passneed 4.5:1 |
| UI components | Passneed 3:1 | Passneed 4.5:1 |
Component preview
CSS export
:root {
--color-text: #000000;
--color-bg: #ffffff;
}使用说明
- 1 选择或输入前景色（文字）和背景色
- 2 查看对比度比值以及 AA / AAA 各档位的通过状态
- 3 在组件预览中验证效果，必要时导出为 CSS 变量
相关工具
条形码生成
在线条形码生成工具，支持CODE128和EAN-13格式，生成高质量条形码图片
Box Shadow 生成器
在线 Box Shadow 生成器，支持实时预览阴影参数并复制 CSS 代码。
颜色工具/拾色器
在线颜色拾取工具，支持HEX、RGB、HSL多格式互转，实时预览颜色效果
CSS 渐变生成器
在线 CSS 渐变生成器，支持线性渐变预览、角度调节和 CSS 代码复制。
Favicon 生成器
在线 Favicon 生成器，支持上传图像后生成多尺寸网站图标并下载 PNG 文件。
在线白板/画板
在线白板画板工具，支持画笔、橡皮擦、颜色选择、笔刷粗细调节，可导出为PNG。
二维码识别/解码
上传二维码图片，自动识别并解码出文本内容，先看内容再决定是否访问，避免扫到恶意链接。
二维码生成
输入文本或链接，即时生成QR二维码图片，可下载PNG
关于此工具
本工具根据 WCAG 2.2 规范计算两种颜色的相对亮度差，输出对比度比值（1-21）。WCAG 要求普通文字至少达到 4.5:1（AA）或 7:1（AAA），大号文字至少 3:1（AA）或 4.5:1（AAA），UI 组件（输入框边框、图标）至少 3:1。对比度不足会导致色弱用户、老年用户或在强光环境下阅读困难。
工具会同时展示按钮、卡片、输入框、超链接等真实组件的视觉效果，比单纯看色块更贴近实际使用场景。还会给出每对颜色的二进制表示，方便设计师与开发者沟通。
所有计算在浏览器本地完成，无需上传任何数据。
常见问题
WCAG 2.2 和 WCAG 2.1 在对比度上有区别吗？ +
对比度本身规则没变（仍是 4.5:1 / 3:1 等阈值）。2.2 主要补充了「非文字对比度」和「聚焦可见性」的细则，明确要求 UI 组件（按钮边框、图标、表单控件边界）与相邻颜色的对比度至少 3:1。本工具同时检测文字和 UI 组件两个维度。
为什么我看起来很清楚的配色仍判为不通过？ +
WCAG 是基于相对亮度（考虑人眼对不同颜色的敏感度）计算的，不是简单的色差。常见的失败案例：红底绿字（色弱用户无法区分）、深灰底浅灰字（亮度差不足）、品牌色作为按钮文字（很多品牌色饱和度高但亮度不够）。建议使用本工具测试后再上线，而不是仅凭肉眼判断。
「AA」和「AAA」分别在什么场景下要求？ +
AA 是大部分法规（如欧盟 EN 301 549、美国 Section 508）和商业网站的最低要求。AAA 是更高标准，主要用于公共服务、医疗、教育类网站，要求更严格（普通文字 7:1）。如果你的网站需要服务老年、视障人群或希望获得无障碍认证，建议达到 AAA。
大号文字的判定标准是什么？ +
WCAG 定义「大号文字」为：粗体 ≥ 14pt（18.66px）或常规体 ≥ 18pt（24px）。大号文字的对比度阈值更低（AA 3:1 / AAA 4.5:1），因为大字号本身更易读。工具会同时显示两种文字档位的结果，让你按实际字号判断。
工具支持哪些输入格式？ +
支持 HEX（#RRGGBB）、RGB（rgb(255, 0, 0)）、以及原生颜色选择器。结果输出可一键复制为 CSS 变量（如 --color-text: #000000;），方便集成到设计系统或 Tailwind 配置中。