对比度
Contrast
初级通用对比度（Contrast）是界面中相邻或叠放元素在明暗等视觉特征上的差别。它帮你判断文字能否看清、控件能否被发现，以及重要信息是否突出；比如浅灰字放在白色卡片上，差别太小就难读。
你可能会说：「这个页面的字和按钮都快融进背景了，能帮我调到一眼看清重点吗？」
动手看看订阅账单卡片
MindSet Pro
下期订阅账单
¥ 128.00
预计 6 月 18 日自动扣费
扣费前可随时在订阅设置中取消
管理订阅
拖动「说明文字明度」，看看扣费日期和取消说明什么时候开始难读；再调整卡片底色。金额保持不变，方便对照信息层级。
要点看界面对比度时，我们在比较什么？
- 1
先看元素与背景的明暗差
你看一段文字是否清楚，要把文字和它背后的颜色放在一起比较。因为浅灰字落在白底上，两者明暗接近，所以即使字号不小，读起来也可能费力。
- 2
对比要跟着实际状态检查
同一个按钮可能有默认、悬停和禁用状态，背景也可能随深色模式变化。只看设计稿中的一种组合不够；我们得看真实页面里文字、图标和控件最终叠在什么颜色上。
- 3
差别大小会影响注意顺序
结算页里，总金额和次要说明可以有不同的视觉对比。因为人通常先注意更显眼的部分，所以你能借此突出重点；但说明文字仍要看得清，不能靠淡到难读来制造层级。
容易混淆的地方
对比度说的是两个视觉对象之间的差别，不等于亮度：把文字和背景一起调亮，它们的对比可能几乎没变。它也不等于视觉层级；层级是用户先看哪里、后看哪里的整体安排，对比度只是其中一种手段，字号、位置和间距也会影响阅读顺序。
什么时候用
适合用
- 做后台数据表格时，浅色行底上的文字和状态标签难辨认，可以检查它们与各自背景的对比度。
- 给 AI 聊天工具做深色模式时，检查消息正文、引用文字和输入框边界在深色背景上是否看得清。
- 设计购买页时，用对比度区分主要操作和次要操作，同时确认两种按钮上的文字都容易读。
不适合用
- 页面信息都能看清，只是卡片挤在一起、分组不明时，先调整间距和布局，而不是一味拉大颜色差别。
- 用户读得清提示，却不知道点完按钮会发生什么时，问题在文案表达；先把操作名称写具体。
- 接口返回的数据顺序不符合预期时，去检查排序逻辑；这是数据处理问题，调整界面对比度解决不了。
练一练选一个答案，看看解释
你让 AI 做了一个深色模式的订单页。页面整体有层次，但订单备注几乎看不清。下一步最贴近对比度问题的做法是什么？
让 AI 帮你做复制给 AI Agent 直接用
请检查这个订单页的对比度：重点看正文、次要说明、状态标签和按钮文字与各自实际背景的差别，覆盖默认状态和深色模式。指出难以辨认的位置并调整颜色，保留主要操作的视觉重点，不要只靠降低文字可读性来区分层级。