principle　/　Contrast

Contrast

通过颜色、明度、尺寸、字重、形状、空间或运动差异，使元素之间产生清楚区分。

Key fields

What

Definition: 通过颜色、明度、尺寸、字重、形状、空间或运动差异，使元素之间产生清楚区分。

Why

Core Question: 元素之间是否有足够且有语义的差异，让用户能区分层级、状态和功能？
Mechanism: 对比提高目标与背景之间的可分辨性，使用户更快发现边界、层级和状态。对比维度越多，视觉竞争越强，系统越需要限制强调范围。

How

Primary Use: 建立层级、突出重点、提升可读性和状态辨识度。
Design Guidance: 先明确需要区分的语义，再选择少量对比维度；正文与背景同时检查可读性和无障碍对比度。

Evidence

Limitations: 对比不只是改颜色，差异过多会制造噪声；颜色对比不能替代文字、形状和位置线索，还必须满足可读性与无障碍要求。
Last Verified At: 2026-08-21
Common Mistakes: 对比不是只改颜色；差异越大不一定越好；颜色对比不能替代标签和形状线索。

Lifecycle

Status: 待复核