如何用实测对比度建立易读的配色。
为颜色分配用途并测试实际前景与背景组合。好看的色彩集合不保证文字可读或交互状态可访问。
按任务需求调整流程。
按具体用途选色，提供准确色值并测试将使用的前景背景配对。需要时包含交互状态和其他表面。区分审美偏好与测得的对比度，在真实组件中评估。
- 你需要提供什么
- 品牌特点和无障碍限制。
- 你会得到什么
- 经对比度核查的候选配色。
查看输入和结果。
演示用输入和输出 · 教学示例，并非 WebAct 实时运行结果
示例 个输入项
Create a small UI palette using navy and warm cream, plus an orange-brown accent. Need body text, links and a filled action button. Calculate contrast for solid, opaque pairs.
完整示例
Background: #fff7ed Body text: #172554 — contrast on background ≈ 13.84:1 Underlined links/accent text: #9a3412 — contrast on background ≈ 6.88:1 Action button: #9a3412 background, #ffffff label — contrast ≈ 7.31:1 These pairs exceed the 4.5:1 normal-text threshold. This checks the stated solid-color pairs only; focus, hover, disabled states and the rest of the interface still need review.
将这份输入载入提示词，再复制到 WebAct 中尝试任务。实际结果可能与示例不同。
决策与问题排查。
一个高对比度文字组合能保证整个界面无障碍吗？
不能。其他状态、控件和非颜色提示也需审查。配对测试只是界面评估的一部分。
强调色适合装饰却不适合小字，为什么？
文字与背景的对比度可能不足。调整颜色用途或配对。
此工作流程的参考资料。
使用自己的资料试一试。
将任务提示词中的示例换成你的材料。保留所需条件，再把任务复制到 WebAct。
自定义并复制任务 ↑