术语图鉴/UI/UX 设计/对比度
←→切换Esc返回

对比度 Contrast

你可能会说

这段灰字在浅色背景上看不清,帮我提高对比度。

文字和背景颜色的明暗差异程度。

文字和背景颜色的明暗差异程度。对比度够才看得清——白底黑字清晰,灰底灰字就费眼。

也常被叫作Contrast

生活类比

像投影仪亮度——幕布上字和背景的亮度差越大,看得越清楚。

🎮 动手试试

这段文字的对比度
✓ 通过 WCAG AA
选择题选择一个你认为最合适的答案

关于「对比度」,以下哪个描述最准确?

你可以这样告诉 AI

帮我检查这个页面的文字对比度,灰色字在浅色背景上是否看得清,不够的话调深文字或调浅背景。

容易混淆?这样区分

对比度 Contrast≠
配色 Color Palette

对比度衡量文字与背景的明暗数值差异,配色关注多种颜色之间的协调搭配关系。

什么时候用

文字可读性检查

当文字在背景上看起来费眼或不清晰时,检查对比度是否达到 WCAG 标准(正文 4.5:1 以上),确保所有用户能轻松阅读。

和 AI 协作时

想让 AI 检查对比度时,说「灰色字太浅看不清,帮我把对比度调到 WCAG AA 标准」,AI 会计算并给出新色值。

什么时候不用

纯装饰性元素

仅用于装饰、不承载信息内容的元素(如背景花纹、分隔线)不需要达到可读性对比度标准——美观即可。

与纯音频/语音产品无关

播客、语音助手等没有屏幕显示的产品,对比度(颜色明暗差异)完全无应用场景。

组成结构 · Anatomy

1
核心概念Core

文字和背景颜色的明暗差异程度。对比度够才看得清——白底黑字清晰,灰底灰字就费眼。

2
实际表现In Practice

像投影仪亮度——幕布上字和背景的亮度差越大,看得越清楚。

3
与 AI 的关联AI Context

和 AI 沟通时提到「字看不清,对比度太低」,它就知道要加深文字或调浅背景。

典型使用场景

检查可读性
告诉 AI「这段 #999 灰色字在白底上对比度够不够 WCAG AA?不够的话帮我算一个合适的深色值」
想弄懂概念时
告诉 AI「用大白话给我解释什么是对比度,举个生活中的例子」

延伸阅读