颜色对比度检查器 — WCAG AA/AAA 对比度与 APCA
按 WCAG 2.x AA 和 AAA 标准检查文字与背景颜色，查看 APCA Lc 值，并获取最接近的达标颜色。
大号文字，24px（18pt）常规
大号粗体文字，18.67px（14pt）粗体
16px 的普通正文。敏捷的棕色狐狸跳过了懒狗。长段落比标题需要更高的对比度，因为小字号下的细笔画容易糊在一起。
13px 的小字，相当于图注和页脚的大小。
最接近的达标颜色
只改变亮度（在 OKLCH 中），色相保持不变。可以直接应用，也可以复制。
#7676764.54:1#0606064.52:1#5959597.00:1在你的浏览器中计算。你输入的任何内容都不会发送给我们，也不会被保存。 浏览全部免费工具.
发现问题，或者觉得哪里可以更好？每条消息我们都会阅读，并尽快修复。
这款免费的颜色对比度检查器会根据 WCAG 2.x 告诉你，文字在背景上是否清晰可读。WCAG 2.x 是 ADA、《欧洲无障碍法案》以及大多数无障碍审核所依据的标准。通过颜色选择器、HEX 代码或屏幕取色器输入文字颜色和背景颜色，它就会显示对比度，并给出普通文字和大号文字在 AA、AAA 级别下的通过或不通过，以及按钮边框、图标等界面组件的判定结果。
当一组颜色不达标时，检查器会在 OKLCH 色彩空间中只调整明度，推荐最接近的达标文字色或背景色，从而保持你的品牌色相不变。它还会显示 APCA Lc 值——这是 WCAG 3 工作草案中的新方法，模拟了人眼实际感知对比度的方式，更擅长评估深色模式和细字体。WCAG 3 还不是正式标准，所以就合规而言，WCAG 2.x 的对比度才是算数的数字；页面也会解释两者在哪些地方结论不同。
使用方法
- 输入文字颜色和背景颜色：使用颜色选择器、输入 HEX 代码（#777 或 #777777），或点击眼睛图标吸取屏幕上任意像素的颜色（Chrome 和 Edge）。
- 查看对比度和五项判定结果。正文需要达到 AA 普通文字标准（4.5:1）；24px 或 18.66px 粗体的标题需要达到 AA 大号文字标准（3:1）。
- 查看预览，了解这组颜色在正文、大号文字和说明文字尺寸下的实际效果。
- 如果某项检查未通过，可以在“最接近的达标颜色”中应用推荐颜色，它只改变明度。
- 用“交换”测试反转后的效果（比如深色模式版本），然后复制结果或 CSS。
常见问题
WCAG 要求的对比度是多少？
WCAG 2.1 和 2.2 的 AA 级要求普通文字至少 4.5:1、大号文字至少 3:1（成功标准 1.4.3），用户界面组件和有意义的图形（如输入框边框、焦点框和图标）至少 3:1（1.4.11）。AAA 级把文字要求提高到普通文字 7:1、大号文字 4.5:1（1.4.6）。Logo 以及纯装饰性或已禁用的元素不受此限制。
WCAG 中什么算大号文字？
至少 18 磅常规字重或 14 磅粗体。换算成 CSS 像素就是 24px 常规或约 18.66px 粗体，因为 1 磅等于 1.333 像素。16px 粗体标题不算大号文字，20px 常规字重也不算。实际上，细字体或装饰性字体即使达到这些尺寸也可能不够清晰，这正是 APCA 想要解决的问题之一。
白底上的 #777777 符合无障碍要求吗？
用于正文不符合。#777777 在 #ffffff 上的对比度为 4.48:1，略低于 AA 的 4.5:1 阈值，所以普通文字不能通过 AA，只适用于大号文字和界面组件。WCAG 不允许四舍五入，所以 4.48 就是不通过。白底上能通过 AA 的最浅灰色是 #767676（4.54:1）；AAA 则是 #595959（7.00:1）。
APCA 是什么？应该用它代替 WCAG 2 吗？
APCA（Accessible Perceptual Contrast Algorithm，无障碍感知对比度算法）是为 WCAG 3 提出的对比度计算方法。它给出的不是比值，而是明度对比值 Lc，范围约为 -108 到 106，正负号表示极性（负值表示深色背景上的浅色文字）。它考虑到了相同的比值会因极性和颜色深浅不同而呈现不同的可读性，这也是为什么 WCAG 2 会高估深色配深色的组合、低估某些彩色背景上的白字。可以用它来做出更好的设计决策，但合规报告请使用 WCAG 2.x：WCAG 3 还是工作草案，其对比度方法仍可能变化。
对比度是怎么计算的？
先计算每种颜色的相对亮度：把 sRGB 通道转换为线性光，再按人眼对各色的敏感度加权，红 0.2126、绿 0.7152、蓝 0.0722。比值为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮的颜色。范围从 1:1（颜色相同）到 21:1（白底黑字）。0.05 这一项模拟的是屏幕反射的环境光。
颜色对比度不达标怎么改？
改明度，不改色相。加深文字或提亮背景（深色模式下则相反），直到对比度达标。本页的推荐颜色正是在 OKLCH 色彩空间中这样做的，所以不达标的品牌蓝会变成更深的蓝，而不是换成别的颜色。如果两个方向都达不到目标——当另一种颜色是中间调时就会出现这种情况——那就改另一种颜色：中灰色背景配任何文字颜色都达不到 7:1。
WCAG 2.x 对比度要求一览
• 普通文字，AA（1.4.3）：4.5:1。适用于正文、标签、链接、传达信息的占位文字以及图片中的文字。
• 大号文字，AA（1.4.3）：3:1。指至少 24px 常规或 18.66px 粗体的文字。
• 界面组件和图形，AA（1.4.11）：与相邻颜色的对比度 3:1。包括输入框边框、复选框轮廓、焦点指示器、有含义的图标和图表线条。
• 普通文字，AAA（1.4.6）：7:1。大号文字，AAA：4.5:1。很少有网站能处处达到 AAA；对于长篇阅读内容和面向老年读者的网站，值得以此为目标。
• 豁免：Logo 和品牌名称、已禁用的控件、纯装饰性元素，以及附带出现的文字（例如照片中的文字）。
几乎每次审核都会碰到两个错误。表单字段中的占位文字通常是浅灰色，达不到 4.5:1，而它往往又是唯一的标签，所以必须计入。另外，白字的品牌色按钮对比度常常落在 3 到 4.5 之间，只能满足大号文字的要求，而按钮文字却只有 14 或 16px。
WCAG 2 与 APCA 的分歧
WCAG 2 的公式把对比度视为对称的、与亮度呈线性关系，但人眼并非如此。实际中有两个后果屡见不鲜。
深色模式：近黑背景上的浅灰文字往往轻松通过 WCAG 2，看起来却刺眼或模糊；而一些中深色组合虽然通过了，却很难阅读。APCA 对深底浅字单独处理（Lc 为负值），并且在深色一端更为严格。
高饱和颜色：橙色（#ff7a00）上的白字在 WCAG 2 下约为 2.6:1，判定不通过；同一橙色上的黑字则能通过——但许多读者觉得白字版本一样好读。APCA 的评分更接近人的感知。
APCA 等级的经验法则：正文推荐 Lc 90，正文最低 Lc 75，其他内容文字 Lc 60，大标题 Lc 45，占位文字和禁用文字 Lc 30，分隔线等非文字元素 Lc 15。完整的指南还取决于字重和字号。请把它作为 WCAG 2 之外的设计辅助，而不是合规检查的替代品。
相关免费工具
- 配色方案生成器 — 按空格键生成新配色，锁定喜欢的颜色，选择色彩搭配规则，或从照片中提取配色。可导出为 CSS、Tailwind、SCSS、JSON 或 PNG。
- 取色器与颜色转换 — 从屏幕任意位置吸取颜色，或在 HEX、RGB 和 HSL 之间即时转换。
- CSS 渐变生成器 — 通过可拖动的色标、角度转盘和预设创建线性、径向和锥形渐变。可复制 CSS 或 Tailwind 类名。
- Box Shadow 阴影生成器 — 实时预览设计多层 box-shadow 和 text-shadow 效果，提供层级、新拟态和发光预设，一键复制 CSS。