色彩对比度检查器
新检查文字与背景颜色之间的 WCAG AA/AAA 对比度。
Large heading — 24px bold
Large text, 18.66px and up reads at 3:1.
Normal body text. The quick brown fox jumps over the lazy dog and reads comfortably at 4.5:1 or better.
Small print and captions — the hardest text to read.
Keeps your hue & saturation — only the lightness changes — so brand colors stay recognizable.
Pairwise palette grid
Paste several colors (hex, one per line or separated by spaces / commas) to see which foreground/background pairs pass AA (4.5:1). First 8 colors are used.
Runs entirely in your browser. Nothing is uploaded.
在浏览器中检测WCAG颜色对比度
这款颜色对比度检测器可测量文字颜色与背景颜色之间的WCAG对比度比率，并即时告知该颜色组合是否通过普通文字、大文字及UI组件的AA和AAA级别。输入十六进制值、编辑RGB或HSL字段、拖动亮度滑块，或使用取色笔从屏幕上获取任意颜色——比率、通过/失败矩阵和实时预览均会在输入时同步更新。
其原理与设计师已信赖的工具相同——采用与WebAIM和Adobe Color相同的WCAG计算公式——但额外提供实时可读预览、APCA（WCAG 3）评分以及一键修复不达标颜色对的功能。所有运算均在本地JavaScript中执行：您的颜色永远不会离开您的设备，也无需任何账号。
WCAG AA与AAA阈值详解
WCAG对比度比率从1:1（两种相同颜色）到21:1（黑底白字）不等。AA级别——ADA和508条款等大多数法律要求的标准——要求普通文字达到4.5:1，大文字达到3:1。AAA级别则将标准提升至7:1和4.5:1。大文字指18pt（24px）及以上，或14pt（约18.66px）及以上的粗体文字。
通过/失败矩阵会分别列出每个阈值，让您一眼看出：白底上的#767676灰色以4.54:1通过AA正文文字标准，但未达到AAA所需的7:1。如果您的团队需要满足法律合规要求（ADA、EN 301 549、508条款），AA是需要达到的标准。对于以阅读为主的界面，在设计允许的情况下值得追求AAA。
预览、修复并发布无障碍颜色对
数字只能说明一半，因此实时预览会用您的确切颜色渲染真实的标题、正文、小字以及示例按钮和标签——亲眼查看可读性，而不仅仅读取比率。当某个颜色对不达标时，"使其通过"建议功能会保留您的色调和饱和度，将亮度微调至最接近的能通过所选级别（AA、AA大文字或AAA）的颜色，并一键应用。您可以选择调整文字颜色或背景颜色。
配对网格可接受完整的颜色板，并一目了然地显示哪些颜色组合能通过——在构建设计系统时尤为实用，因为每对前景色和背景色都需要安全。无需逐一测试数十个颜色对，只需粘贴您的颜色板，即可立即看到完整矩阵。
APCA：WCAG 3对比度预览
除经典比率外，本检测器还显示APCA Lc评分——为WCAG 3提出的感知对比度指标。APCA模拟眼睛实际阅读暗底亮字与亮底暗字的方式，并考虑字重因素，能发现WCAG 2比率有时遗漏的可读性问题。大致参考值：正文文字Lc 75+，大文字Lc 60+，大标题Lc 45+。
WCAG 3仍处于草案阶段，尚未取代WCAG 2.2，因此当前合规意味着满足4.5:1和3:1的阈值。在当前比率旁同时显示APCA，让您无需等待规范最终确定即可为将来做好准备。
图标与UI组件的非文字对比度
对比度不仅适用于文字。WCAG 2.1 SC 1.4.11要求交互组件边界——输入框边框、焦点指示器、切换状态——以及有意义的图标和图形与相邻颜色之间达到3:1的对比度。矩阵包含专门针对3:1阈值的UI和图形检测，让您确认按钮轮廓或图标是否可见。
这是许多团队在未意识到的情况下未通过审计的领域。浅灰色输入框边框（白底上的#D1D1D1仅为1.4:1）是WCAG 2.1的常见违规项，即便页面上所有文字都通过了检测。在此检测UI组件只需几秒钟，可避免正式审计时出现意外。
与WebAIM、Adobe Color及Chrome DevTools的对比
WebAIM对比度检测器（webaim.org）是引用最广泛的免费无障碍工具，采用与本工具相同的WCAG 2公式。但它不显示APCA，没有实时文字预览，无法自动修复不达标颜色对，也没有用于同时测试多种颜色组合的配对网格。
Adobe Color无障碍工具显示AA/AAA通过/失败结果并包含色盲模拟器，但需要免费的Adobe账号才能保存作品，也无法自动建议通过颜色。
Chrome DevTools在元素面板颜色选择器中有对比度比率标识，适合浏览器内检查——但仅限于DevTools内部使用，无法分享特定颜色对的链接。
本检测器无需登录，同时显示WCAG 2比率和APCA Lc评分，以您选择的颜色渲染实时预览，并支持在单一视图中测试完整的颜色板网格。所有计算均在本地JavaScript中运行——您的颜色永远不会离开您的设备。
Frequently asked questions
什么是颜色对比度检测器？
颜色对比度检测器测量文字（前景）颜色与背景之间的WCAG对比度比率，告知该颜色对是否符合无障碍指南的可读性要求。输入两种颜色，它会返回从1:1（相同）到21:1（黑底白字）的比率，以及普通文字、大文字和UI组件的AA与AAA通过/失败结果。本工具完全在浏览器中运行——颜色不会发送到服务器，也无需账号。
WCAG规定的最低对比度比率是多少？
WCAG规定了文字与背景之间的最低对比度比率：AA级别普通文字4.5:1、大文字3:1，AAA级别则分别提升至7:1和4.5:1。纯黑色文字（#000000）在白色（#FFFFFF）上的最大比率为21:1。这些阈值适用于WCAG 2.0、2.1和2.2——各版本数值保持不变。
WCAG AA与AAA有什么区别？
AA是普遍要求的基础级别——普通文字4.5:1，大文字3:1。AAA是增强级别——普通文字7:1，大文字4.5:1。大多数无障碍法律（ADA、508条款、欧洲EN 301 549）以AA为目标。WCAG规范本身指出AAA不切实际作为整个页面的统一要求，因此AA是大多数公共网站的实际目标。
图标和UI组件需要满足对比度要求吗？
需要。WCAG 2.1 SC 1.4.11（非文字对比度）要求交互组件视觉边界——输入框边框、焦点环、切换状态——以及有意义的图标和图形与相邻颜色之间至少达到3:1的对比度。本工具的结果网格包含专门的UI和图形行，阈值为3:1，无需额外计算即可确认按钮轮廓和图标是否合格。
如何修复不达标的对比度比率？
最快的解决方法是加深文字颜色或调亮背景，直到达到阈值，同时只改变亮度以保留品牌色调。本工具的内置"使其通过"建议功能可自动完成此操作——将文字或背景微调至最近的通过颜色并一键应用，无需手动调整十六进制值。
什么是APCA，为什么重要？
APCA（无障碍感知对比度算法）是为即将推出的WCAG 3提出的对比度方法。它不返回单一比率，而是返回约-108到106之间的感知亮度对比度（Lc）值；绝对值越大，对比度越高。大致参考：正文Lc 90为首选，Lc 75为最低值，大文字Lc 60，大标题Lc 45。APCA比WCAG 2比率更好地考虑了暗底亮字与亮底暗字的极性差异以及字重因素。
WCAG 2.1还是2.2是当前要求？
WCAG 2.0、2.1和2.2中的对比度阈值完全相同。WCAG 2.2是当前W3C推荐标准，也是大多数新法规引用的版本，因此建议以2.2 AA级别为目标。现有WCAG 2.0或2.1 AA合规工作在文字对比度方面仍然有效，因为核心对比度要求未发生变化。
