UD5工具箱
颜色设置与选择器
本工具提供文字颜色和背景颜色两个独立的颜色设置区域。每个区域都配备了原生HTML5颜色选择器（input type="color"），用户可以通过点击色块打开系统级调色板，精确选择任意颜色。同时，每个颜色输入框旁边都提供了十六进制颜色值的文本输入框，允许用户直接输入精确的颜色代码，例如 #FFFFFF 或 #000000。这种双输入模式满足了不同使用习惯：设计师习惯在调色板中直观选色，而开发者则更倾向于直接粘贴设计稿中提取的颜色代码。两种输入方式实时同步，选择器的变更会立即反映到文本框中，反之亦然。
快速预设配色方案
工具内置了8种经过精心挑选的经典配色预设方案，帮助用户快速开始检测。这8种预设涵盖了常见的实际应用场景：经典黑白（黑字白底，对比度21:1，最高合规）、白字黑底（反色方案）、白字蓝底（品牌风格）、深灰配浅灰（柔和风格）、黄字黑底（高对比警示风格）、蓝字白底（链接样式）、深棕配米色（暖色调）、紫字白底（创意配色）。每种预设都经过对比度验证，点击即可一键应用到文字颜色和背景颜色设置中，立即看到检测结果。预设方案的存在不仅节省了用户自行选择颜色的时间，更重要的是为初学者提供了经过检验的安全配色参考。
随机生成颜色对
对于希望测试各种颜色组合场景的用户，工具提供了一键随机生成功能。点击随机按钮后，工具会自动生成一对随机的文字颜色和背景颜色，用户可以借此快速观察不同颜色组合在各种对比度下的检测结果。这个功能在设计探索阶段特别有用，能够帮助设计师跳出固有思维，发现意想不到的配色可能性，同时也能用于压力测试，观察工具在极端对比度情况下的检测表现。
实时预览区域
实时预览是本工具最直观的核心功能。当用户调整颜色设置后，预览区域会立即更新，展示当前配色方案在四种不同文字场景下的实际显示效果：标题文字示例（模拟H1-H3等大号标题）、正文文字（模拟段落文本的标准大小）、小号文字（模拟注释、脚注等小号文本）以及粗体正文（模拟加粗强调文本）。四种预览场景覆盖了网页中最常见的文字使用形态，让用户能够全面评估当前配色在不同排版环境下的可读性表现。预览区域直接应用用户选择的文字颜色和背景颜色，所见即所得，用户无需切换到实际项目中就能直观感受配色效果。
对比度比率显示
工具在检测结果区域以醒目方式显示计算出的对比度比率，格式为 X.XX:1。对比度比率是衡量两种颜色之间亮度差异的量化指标，数值越大表示对比度越高。例如，纯黑色（#000000）与纯白色（#FFFFFF）的对比度比率为21:1，这是sRGB色域内能达到的最大对比度；而两种非常接近的颜色可能仅有1.2:1的对比度。比率数值采用大字号突出显示，确保用户一眼就能获取核心数据。
WCAG标准合规检测
工具的核心检测逻辑围绕WCAG 2.1的四组对比度要求展开，以矩阵形式展示检测结果：AA普通文字（对比度≥4.5:1）、AA大文字（对比度≥3:1）、AAA普通文字（对比度≥7:1）、AAA大文字（对比度≥4.5:1）。每组检测结果以直观的通过/不通过状态标识呈现，用户可以一目了然地看到当前配色方案在各等级下的合规情况。WCAG 2.1标准中，AA级是法律和政策层面最常见的合规基线要求，而AAA级则代表最高级别的可访问性承诺。普通文字的阈值高于大文字，因为小字号文字在低对比度下更难辨认。工具同时展示四个维度的检测结果，帮助用户根据自身项目的合规目标选择合适的配色方案。