其他
对比度检查器
对比度检查器用于指定前景色(文字颜色)与背景色,实时计算二者之间的对比度比值,并判定其是否符合 WCAG(Web Content Accessibility Guidelines)2.1 / 2.2 的无障碍标准。对比度检查结果会以 4.5:1 这样的形式醒目显示,作为配色检查器可一眼确认配色的无障碍效果。
预览
可确认普通尺寸文本的呈现效果。
大号文本的呈现效果
UI 组件示例WCAG 2.1 / 2.2 判定
| 区分 | AA? | AAA? |
|---|---|---|
| 普通文本 | 合格4.5:1 | 合格7:1 |
| 大号文本(18pt / 14pt 加粗以上) | 合格3:1 | 合格4.5:1 |
| UI 组件·图形 | 合格3:1 | 无规定 |
色觉异常模拟?
呈现效果基于 Brettel 1997 法的近似,不保证每个人的实际呈现效果。
计算全部在您的浏览器中完成,输入的颜色不会被发送到外部服务器。
相关工具
二维码生成
将 URL / 联系人 / Wi-Fi / 邮件 / 事件 / 地理坐标 / SMS / 电话 / 文本转换为二维码图片。可选尺寸、格式、颜色与 Logo。全程在浏览器中完成。
抽签 / 抽奖
从文本列表或数值范围中随机抽出 1~N 项。支持不重复、卷轴动画、抽签历史保存。全程在浏览器中完成。
取色器
从图片中提取颜色并取得颜色代码。可通过放大镜按像素精确拾取,支持 HEX / RGB / HSL 切换与调色板导出。全程在浏览器中完成。
颜色代码转换
可在 HEX、RGB、HSL、HSV、OKLCH 颜色代码之间相互转换的免费工具。支持带透明度的 RGBA、8 位 HEX 和 HSLA,输入一个颜色即可一次性转换为所有格式并一键复制,同时显示 CMYK 参考值。全程在浏览器中完成。
番茄钟
免费在线番茄钟,按 25 分钟专注 + 5 分钟休息的节奏循环。支持圆形进度条、提示音、全屏模式以及始终置顶的画中画弹出窗口,可用于学习与工作专注计时。全程在浏览器中完成。
单位换算
可在长度、重量、温度、面积、体积、速度等多种单位之间相互换算的免费单位换算工具。支持 cm 与英寸、摄氏与华氏、坪与平方米等实时换算,涵盖长度换算、重量换算、温度换算等场景。全程在浏览器中完成。
对比度检查器是什么?
对比度检查器用于指定前景色(文字颜色)与背景色,实时计算二者之间的对比度比值,并判定其是否符合 WCAG(Web Content Accessibility Guidelines)2.1 / 2.2 的无障碍标准。对比度检查结果会以 4.5:1 这样的形式醒目显示,作为配色检查器可一眼确认配色的无障碍效果。
颜色除可在 HEX 代码文本框中输入外,还能通过颜色选择器,或在支持的浏览器中使用取色器(EyeDropper API)直接拾取屏幕上的颜色来指定。判定针对“普通文本”“大号文本(18pt / 14pt 加粗以上)”“UI 组件·图形”三个区分,分别显示 AA、AAA 的合格与否。普通文本的 AA 为 4.5、AAA 为 7,大号文本的 AA 为 3,UI 组件为 3(aa 对比度 / wcag 对比度)。
此外,当未达到标准时,工具会调整明度并自动建议最接近的达标颜色,可一键应用。在色觉异常模拟中,可并排查看 P 型、D 型、T 型下的呈现效果;同时一并列出 APCA(预计在 WCAG 3.0 中采用的基于感知的指标)的 Lc 值供参考。还提供以指定配色呈现的实际效果预览。
计算全部在您的浏览器中完成,输入的颜色不会被发送到外部服务器。无需注册账号,即可立即使用。
使用方法
- 通过 HEX 输入、颜色选择器或取色器中的任意一种方式指定前景色(文字颜色)与背景色。
- 对比度比值会自动计算并醒目显示。
- 针对 WCAG 的三个区分(普通文本、大号文本、UI 组件),确认 AA、AAA 的合格与否。
- 当未达到标准时,可点击建议的达标颜色,将其应用到前景色或背景色。
- 在预览中确认实际呈现效果,并通过色觉异常模拟比较 P 型、D 型、T 型下的呈现效果。
- 可根据需要使用交换按钮反转前景色与背景色。
使用场景
- 想确认网站或应用的文字颜色与背景色是否符合 WCAG 无障碍标准的制作者。
- 想在发布前检查设计稿配色对比度比值是否达到 4.5 以上的设计师。
- 想确认按钮、图标等 UI 组件是否满足 3:1 的前端开发者。
- 想通过模拟确认配色对色觉异常用户是否也易于辨识的用户。
- 想在尽量保持原有色调的同时,将不达标的配色快速调整为达标颜色的用户。
- 想在参考 APCA 等新指标的同时,研究配色无障碍效果的用户。
注意事项
- 对比度比值依据 WCAG 2.x 的定义(由相对亮度按 (L1+0.05)/(L2+0.05) 计算)。判定标准为普通文本 AA 4.5 / AAA 7,大号文本 AA 3 / AAA 4.5,UI 组件·图形 3。
- “大号文本”指 18pt(约 24px)以上,或 14pt(约 18.66px)以上的加粗文本。
- UI 组件·图形在 WCAG 1.4.11 中仅规定 3:1,没有 AAA 标准(表中显示为“无规定”)。
- APCA(Advanced Perceptual Contrast Algorithm)是 WCAG 3.0 草案中引用的指标,本工具将其作为参考值(Lc)一并列出。正式的合格判定请以 WCAG 2.x 的比值为准。
- 色觉异常模拟基于 Brettel 1997 法的近似,严重程度按最大(双色觉)计算。实际呈现效果因人而异,本工具不对其作出保证。
- 计算全程在浏览器中完成,输入的颜色不会被发送到外部。