UD5工具箱
快速入门：检测一组颜色的对比度
打开文字颜色对比度检测器页面后，您将看到两个颜色设置区域和一个实时预览区域。要检测一组颜色的对比度，只需三步：第一步，在「文字颜色」区域通过颜色选择器或十六进制输入框设置您想要检测的文字颜色；第二步，在「背景颜色」区域同样设置背景颜色；第三步，观察下方实时显示的对比度比率和WCAG合规检测结果。整个过程无需点击任何提交按钮，所有计算和更新都是实时发生的。
举个具体例子：假设您正在设计一个蓝色按钮，计划使用白色文字（#FFFFFF）搭配蓝色背景（#0066CC）。将文字颜色设为#FFFFFF，背景颜色设为#0066CC，工具立即显示对比度比率为5.87:1。查看WCAG检测矩阵，AA普通文字（≥4.5:1）通过、AA大文字（≥3:1）通过、AAA普通文字（≥7:1）不通过、AAA大文字（≥4.5:1）通过。这意味着该配色方案满足AA级合规要求，适用于绝大多数场景；但如果您的项目要求达到AAA级最高标准，则需要加深蓝色或调整为更暗的背景色。
利用快速预设节省时间
如果您不确定要检测什么颜色，可以从快速预设开始。页面中部提供了8个预设配色按钮，每个按钮都以实际的颜色组合作为背景和前景色进行展示。点击任意预设按钮，文字颜色和背景颜色会自动设置为该预设方案对应的值，预览区域和检测结果同步更新。例如，点击「经典黑白」预设，文字颜色变为黑色#000000，背景颜色变为白色#FFFFFF，对比度为21:1，四项WCAG检测全部通过——这是最安全的配色方案。如果您在寻找品牌色的替代方案，可以逐一尝试各预设，观察不同配色组合的对比度表现，找到既符合品牌调性又满足可访问性要求的平衡点。
使用随机生成探索配色可能性
随机生成功能适合设计探索阶段使用。点击随机按钮后，工具会同时生成一对新的文字颜色和背景颜色。您可以连续多次点击，观察各种极端和非典型配色组合的对比度表现。这个过程能帮助您建立对不同颜色组合对比度的直觉感知——例如，您会发现黄色与白色之间的对比度极低，而深色与浅色之间的对比度通常较高。这种直觉在日常设计工作中非常有价值，能够帮助您在选择配色方案时快速判断可行性。
解读实时预览结果
预览区域提供了四种文字场景的实时渲染。标题文字通常使用较大的字号（约24-32px），在对比度不足时仍然具有一定的可辨识性，但阅读舒适度会下降。正文文字使用标准字号（约16px），这是用户阅读网页内容的主要形态，对比度不足会直接影响阅读效率。小号文字使用较小的字号（约12-14px），对对比度的要求最为严格，因为小字号本身辨识难度就高于大字号。粗体正文虽然字号与正文相同，但由于笔画加粗，在同等对比度下比普通正文略易辨认。建议您重点关注正文文字和小号文字的预览效果，因为它们是最能反映实际可读性的场景。如果在预览中已经感到阅读费力，那么实际用户在长时间阅读时的体验会更差。
根据合规等级调整配色
当检测结果显示当前配色不满足目标合规等级时，您需要调整颜色。调整策略取决于具体哪个维度不通过。如果AA普通文字不通过（对比度低于4.5:1），说明当前颜色对的整体对比度偏低，需要加大颜色差异——可以加深文字颜色或减淡背景颜色。如果仅AAA普通文字不通过但AA通过，说明对比度在4.5:1到7:1之间，只需适度加大差异即可。如果仅大文字相关维度不通过，说明对比度在3:1到4.5:1之间，这种情况下如果页面中该配色仅用于大号标题，可以考虑保持现状；但如果也会用于正文，则仍需调整。调整过程中，建议边修改边观察预览区域，确保最终配色不仅数值达标，视觉效果也令人满意。
实际项目中的工作流程建议
在实际项目中，建议将对比度检测纳入设计和开发的标准流程。在设计阶段，设计师应在定义设计系统的色板时，逐一检测所有主要颜色组合的对比度，确保色板中任意前景色与背景色的搭配都能满足目标合规等级。在开发阶段，前端工程师在实现样式时可以使用本工具快速验证实际使用的颜色值是否与设计稿一致且合规。在测试阶段，QA团队可以使用本工具作为辅助手段，对关键页面的文字配色进行抽检。建议将合规基线设定为AA级普通文字标准（4.5:1），这是国际上最广泛接受的最低合规要求；对于政府机构、教育平台等对可访问性有更高要求的项目，建议以AAA级（7:1）为目标。