MUTools

其他

对比度检查器

对比度检查器用于指定前景色（文字颜色）与背景色，实时计算二者之间的对比度比值，并判定其是否符合 WCAG（Web Content Accessibility Guidelines）2.1 / 2.2 的无障碍标准。对比度检查结果会以 4.5:1 这样的形式醒目显示，作为配色检查器可一眼确认配色的无障碍效果。

前景色（文字颜色）
背景色
对比度比值17.40:1

预览

可确认普通尺寸文本的呈现效果。

大号文本的呈现效果

UI 组件示例

WCAG 2.1 / 2.2 判定

区分AA?AAA?
普通文本合格4.5:1合格7:1
大号文本（18pt / 14pt 加粗以上）合格3:1合格4.5:1
UI 组件·图形合格3:1无规定
APCA?Lc 104.3参考值

色觉异常模拟?

P 型（1 型·红）
示例
17.40:1
D 型（2 型·绿）
示例
17.40:1
T 型（3 型·蓝）
示例
17.40:1

呈现效果基于 Brettel 1997 法的近似，不保证每个人的实际呈现效果。

计算全部在您的浏览器中完成，输入的颜色不会被发送到外部服务器。

相关工具

二维码生成

将网址、Wi-Fi、邮件、短信、电话、联系人、地理位置、日历事件、文本生成二维码的免费二维码生成器，可自定义尺寸、颜色与 Logo，全程在浏览器中完成。

抽签 / 抽奖

从名单列表或数值范围中随机抽取 1~N 项的免费抽奖、抽签工具，支持不重复抽取、卷轴动画与历史记录，适合年会抽奖、课堂点名，全程在浏览器中完成。

番茄钟

按 25 分钟专注、5 分钟休息循环的免费在线番茄钟，支持圆形进度、提示音、全屏与画中画弹窗，打开即用、无需下载，适合学习与工作专注，全程在浏览器中完成。

取色器

从图片中提取颜色并获取颜色代码的免费取色器，可用放大镜按像素精确拾取，支持 HEX / RGB / HSL 切换与调色板导出。免费、无需注册。

颜色代码转换

在 HEX、RGB、HSL、HSV、OKLCH 颜色代码之间相互转换的免费工具，支持透明度（RGBA、8 位 HEX）与 CMYK 参考值，一键复制任意格式，全程在浏览器中完成。

单位换算

在长度、重量、温度、面积、体积、速度等多种单位之间相互换算的免费单位换算工具，支持 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 值供参考。还提供以指定配色呈现的实际效果预览。

计算全部在您的浏览器中完成，输入的颜色不会被发送到外部服务器。无需注册账号，即可立即使用。

使用方法

  1. 通过 HEX 输入、颜色选择器或取色器中的任意一种方式指定前景色（文字颜色）与背景色。
  2. 对比度比值会自动计算并醒目显示。
  3. 针对 WCAG 的三个区分（普通文本、大号文本、UI 组件），确认 AA、AAA 的合格与否。
  4. 当未达到标准时，可点击建议的达标颜色，将其应用到前景色或背景色。
  5. 在预览中确认实际呈现效果，并通过色觉异常模拟比较 P 型、D 型、T 型下的呈现效果。
  6. 可根据需要使用交换按钮反转前景色与背景色。

使用场景

  • 想确认网站或应用的文字颜色与背景色是否符合 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 法的近似，严重程度按最大（双色觉）计算。实际呈现效果因人而异，本工具不对其作出保证。
  • 计算全程在浏览器中完成，输入的颜色不会被发送到外部。

常见问题

对比度比值 4.5 是什么意思？
WCAG 2.x 中对普通尺寸文本要求的 AA 标准即“对比度比值 4.5:1 以上”。它由前景色（文字颜色）与背景色的相对亮度之比计算得出，数值越大越易于阅读。本工具会自动计算比值，可一眼判定是否达到 4.5。
AA 与 AAA 有什么区别？
AA 是无障碍的常规达成级别，AAA 是更严格的最高级别。普通文本的 AA 为 4.5:1，AAA 为 7:1；大号文本的 AA 为 3:1，AAA 为 4.5:1。多数网站会首先以达成 AA 为目标。
“大号文本”的标准是什么？
18pt（约 24px）以上，或 14pt（约 18.66px）以上的加粗文本属于“大号文本”，适用比普通文本更宽松的标准（AA 3:1 / AAA 4.5:1）。
未达到标准时该怎么办？
当未达到普通文本 AA（4.5:1）时，本工具会在尽量保持色调的前提下调整明度，分别为前景色与背景色建议最接近的达标颜色。点击建议即可应用该颜色。
APCA 是什么？
APCA（Advanced Perceptual Contrast Algorithm）是一种更贴近人类感知来评估对比度的新算法，预计将在 WCAG 3.0 中采用。本工具将 Lc 值作为参考显示，但目前正式的判定请以 WCAG 2.x 的比值为准。
色觉异常模拟的精度如何？
本工具采用 Brettel 1997 法近似再现 P 型、D 型、T 型下的呈现效果。作为把握配色倾向的参考很有用，但呈现效果因人而异，本工具不对实际呈现效果作出保证。