选择或输入两种颜色（HEX、RGB、HSL 或颜色名），结果随输入实时更新。
对比度
4.83:1
大号标题文字
16px 的正文就是这个样子。
14px 的小字和说明文字。
按钮对比度衡量两种颜色在感知亮度上的差异，范围从 1:1（相同）到 21:1（白底黑字）。WCAG 2.2 在 AA 级要求普通文字至少 4.5:1、大号文字和界面元素至少 3:1，AAA 级则分别为 7:1 和 4.5:1。大约每十二名男性中就有一人存在色觉异常，还有很多人在强烈阳光下看手机，所以低对比度的文字会把真实用户拒之门外。欧洲无障碍法案、美国 ADA 等法规都以 WCAG AA 为依据，因此对很多网站来说，对比度也是法律要求。
所有计算都在浏览器中完成，未发布设计的配色不会被发送到任何地方。
输入文字颜色和背景颜色，可以直接输入任意 CSS 颜色（#1e293b、rgb()、hsl()、oklch() 或颜色名），也可以用取色器。
查看对比度。结果是截断而不是向上取整，所以 4.49:1 永远不会显示为通过。
检查五项 WCAG 结果：普通文字和大号文字的 AA 与 AAA，以及输入框边框、图标、焦点环等界面元素的 3:1。
如果未通过，查看色相不变、只调整亮度的推荐颜色并点击“使用此颜色”，或交换颜色测试反向组合。
Tailwind 的 gray-400（#9ca3af）放在白底上只有 2.5:1，不满足 AA。gray-500（#6b7280）达到 4.8:1，可以用于正文。
浅色品牌蓝用于按钮大字（3:1）可能通过，但用于小字会失败。两种都要检查，或者把按钮背景调暗，直到白字达到 4.5:1。
纯白配纯黑（21:1）可能太刺眼。可以试试更柔和的组合，比如 #0f172a 上的 #e2e8f0，仍有约 14:1，超过 AAA。
WCAG 1.4.11 要求输入框边界和有意义的图标达到 3:1。白底上的 #e5e7eb 边框远低于此，用户很难找到输入框。
按 WCAG 定义，常规字重至少 18pt（24px），或粗体至少 14pt（约 18.66px）。笔画更粗更易读，所以大号文字在 AA 级只需 3:1。
AA 是大多数网站和应用的标准法律目标。AAA 更严格，推荐用于长篇阅读、政务服务和低视力用户较多的场景。
不需要。WCAG 豁免 Logo、装饰性图片和不可用（disabled）的控件。占位文字、链接和焦点指示则需要满足。
APCA 是为未来 WCAG 3 提出的新对比度模型，目前仍是草案，所以当下的法规和审计仍以 WCAG 2.2 的对比度为准。
