对比度
Contrast Ratio
别名:对比度文字对比度可读性对比WCAG 对比看不清contrast ratiocolor contrast
这是什么
前景与背景的亮度比值，衡量文字是否看得清。WCAG 2.1 给出硬性门槛：正文 AA 4.5:1、AAA 7:1，大号文字降到 3:1 与 4.5:1。APCA 按字重与字号给出更贴近感知的建议值。先算比值再选色，不要靠肉眼验收。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 正文、标签、按钮文字需要满足无障碍基线
- 深浅主题切换后需要重新验证文字可读性
- 灰阶辅助文字（muted）容易不知不觉掉到 3:1 以下
✕ 不适用场景
- 装饰性大字或纯图形标识（另有非文本对比 3:1 要求）
- 被禁用的控件文字（WCAG 明确豁免）
- 把 AAA 当作所有界面的强制标准，导致设计空间过窄
常见形式
AA 正文
AA body text
4.5:1，绝大多数界面的默认门槛
AAA 高标
AAA
7:1，长文与老年用户场景
大号文字豁免
Large text exception
≥24px 或 18.66px 粗体，门槛降到 3:1
实现要点
color-mix()oklch()contrast-ratio()@media (prefers-contrast: more)比值算法：先 sRGB 转线性亮度 Y，再 (L1+0.05)/(L2+0.05)。正文锁 4.5:1，大号锁 3:1；辅助文字不要靠降低透明度凑层级，改用 ink-2 色阶。高对比主题用 prefers-contrast: more 或独立角色表。交付前对文字角色两两抽查，尤其是 muted 与 line。
平台 API
WCAG 2.1APCAcontrast-ratio()代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| W3C | WCAG 2.1 — Contrast (Minimum) |
| W3C | APCA |
| CSS | contrast-ratio() 颜色 5 草案中的比值函数 |
相关概念
按用途而非色相命名的颜色变量：bg、surface、text、muted、accent、danger。组件只认角色，主题切换时在映射层换指向即可，不必改组件。浅色、深色、高对比、品牌皮肤都是同一套角色的不同取值表。
基础搭配使用从一个基色出发生成有规律的色阶（50～900），再分配主色、辅助色、点缀色与中性色角色。色阶靠明度递进而非随手取色，保证 hover、disabled、边框都有对应深度可选；角色先于色值被命名，主题才换得动。
基础搭配使用用阴影的深浅表达元素离纸面的远近：0 贴平、1～2 浮起、3 以上成浮层。一套阴影由本影、半影、环境三层叠加而成，档位越高投影越大越淡。层级只用来表达叠放关系，不要拿它当装饰。
基础搭配使用