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 法的近似,不保证每个人的实际呈现效果。

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

对比度检查器是什么?

对比度检查器用于指定前景色(文字颜色)与背景色,实时计算二者之间的对比度比值,并判定其是否符合 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 型下的呈现效果。作为把握配色倾向的参考很有用,但呈现效果因人而异,本工具不对实际呈现效果作出保证。