输入
前景 #000000 / 背景 #ffffff
输出
对比度 21:1，AA/AAA 均通过
设计配色
颜色对比度检测 - WCAG AA/AAA 工具
按 WCAG 2.0 计算前景色与背景色的对比度，检查正文与大字在 AA/AAA 下是否达标，适合无障碍配色与前端可读性验收。
对比度WCAG无障碍
设计配色
颜色对比度检测
大标题 Large Text 正文文本 Normal Text 小字 Small Text
WCAG 对比度
对比度：-
AA 正文-
AA 大字-
AAA 正文-
AAA 大字-
已复制结果
使用场景
- 检查正文与按钮文字可读性
- 验收设计稿是否满足 WCAG
- 调整品牌色至通过 AA 或 AAA
如何使用
- 设置前景色和背景色（取色器或 HEX）
- 查看对比度比值与 AA/AAA 结果
- 按需互换颜色或复制检测结果
示例输入输出
FAQ
AA 和 AAA 有什么区别？
AA 要求正文至少 4.5:1、大字 3:1；AAA 更严格，正文 7:1、大字 4.5:1。
支持哪些颜色输入？
当前按 HEX 取值计算；可用取色器或直接粘贴 #RRGGBB。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
颜色格式转换
颜色格式转换 - HEX RGB HSL 在线工具
在浏览器本地将颜色在 HEX、RGB、HSL、HWB、CMYK 与 CSS 变量之间转换，支持取色器与随机色，适合设计稿取色、写样式和对齐品牌色。
颜色 HEX RGB
批量对比度检查
批量对比度检查 - WCAG 多组校验工具
一次检查多组前景色与背景色的 WCAG 对比度，显示 AA/AAA 等级与文本预览，适合设计系统配色验收、品牌色批量核验和无障碍审核。
对比度 WCAG 无障碍
色彩和谐搭配
色彩和谐搭配 - 经典配色规则工具
选定基准色后，按互补、类似、三角、四角、分裂互补或单色系规则生成配色方案，提供 UI 预览与 CSS 变量，适合品牌与组件配色。
配色 色彩 和谐