使用指南
颜色工具箱用于在 HEX、RGB、HSL 等格式之间转换颜色，并检查前景色和背景色的对比度。输入或选择颜色后，可以快速得到不同格式的值，方便在 CSS、设计稿和组件库之间同步。对比度检查基于 WCAG 思路，帮助判断正文、大号文字和重点按钮是否具有足够可读性。设计界面时不要只依赖视觉感觉，浅色文字叠在亮色背景、灰字叠在深色卡片、品牌色按钮配白字都可能在真实设备上读起来很吃力。
颜色工具箱帮助、示例与常见问题
示例
- 把设计稿中的 HEX 转换为 RGB 或 HSL，写入 CSS 变量和主题配置。
- 检查按钮文字与背景是否达到 AA 对比度，再决定是否加深颜色。
- 为深色模式挑选边框、次级文本和提示色时，预览实际文本可读性。
常见问题
- AA 和 AAA 怎么选？AA 通常是实际产品的基本目标，AAA 更严格，适合重点阅读场景。
- 品牌色不达标怎么办？可以调整明度、给文字换色、增加描边或使用更清晰的状态样式。
- 对比度通过就一定好看吗？不一定，它只覆盖可读性的一部分，还要结合层级、字号和间距。
进阶建议
进阶设计时，可以把颜色检查放到组件状态里一起看：默认、悬停、禁用、错误、选中和深色模式都需要足够清晰。对比度达标只是底线，真正的可用性还依赖字号、字重、间距和信息层级。建立主题色时，建议把可访问性结果写进设计规范，避免后续页面各自临时调色。
排查方法
排查颜色可读性时，不要只看色值是否正确，要把前景、背景、字号、字重和状态一起检查。对比度不足时先调整明度而不是随意换品牌色；深色模式、禁用态、错误态、悬停态都要单独验证。真实设备亮度和低质量屏幕会放大灰字和低对比按钮的问题。