对比接口和可读性

1）为什么会有对比

• 减少认知负担和疲劳，
• 提高了界面扫描速度，
• 提高视力和色彩感知障碍患者的承受能力，
• 减少相互关联的脚本（付款、表格、确认）中的错误。

2）基本概念和公式

2.1 WCAG对比

• Contrast = (L1 + 0.05) / (L2 + 0.05），其中"L1 ≥ L2"，"L"是相对亮度（0..1）。

2.2相对亮度（sRGB）

1.将R、G、B组件带入范围0..1。

• 如果'c ≤ 0。04045', to' c_lin=c/12。92`
• 否则,"c_lin=（c+0.055) / 1.055) ^ 2.4`

3.亮度： 'L=0。2126 R_lin + 0.7152 G_lin + 0.0722 B_lin`

2.3颜色表示

HSL/HSV-方便手动调整,但感知不均匀。
Lab/LCH/OKLCH-更接近人类感知；OKLCH方便于在保持可读性的同时系统地改变光度/饱和度。

3）规范和目标（WCAG 2。2)

文本≥ 14 pt bold或≥ 18 pt（普通）：对比度至少为3：1 （AA）。

文本的其余部分： 对比度最低4。5:1 (AA).

AAA（可读性提高）：普通文本为7：1；4.5-1对于大。
图像和重要的非摄影元素（输入字段边界，检查框，开关，错误指示器）：带背景的地标3：1。
状态（hover/focus/pressed/disabled）在状态之间或具有背景时必须具有不低于3：1的区分性,再加上明显的非摄影指示器（下划线、阴影/边框、厚度变化）。

4）设计系统： 对比令牌

建议在设计系统中将对比度捕获为令牌属性。

• "fg/primary" ↔ "bg/base" ≥ 7：1（关键文本的AAA）
• `fg/secondary` ↔ `bg/base` ≥ 4.5:1
• "fg/muted" ↔ "bg/subtle" ≥ 3：1（服务文本）
• 'border/default' ↔ 'bg/base' ≥ 3：1（字段边界、卡片）
• `interactive/default` ↔ `bg/base` ≥ 4.5：1（链接/按钮）
• "interactive/disabled"不应模仿活动状态；使用对比度降低和光标/ARIA属性。

• 主题的基本亮度（L），然后是层/表面的偏差"Δ L"（"bg/subtle"，"bg/elevated"），
• 在测试中捕获最小对比对。

5）明暗主题

明亮的主题：文字几乎是黑色的（不是干净的#000，而是温暖/寒冷的色调），背景从白色到略微有色以减少"闪烁"。

黑暗主题： 避免纯粹的#000背景-深石墨/煤炭与L≈0。12–0.16降低了亮度；将白色文字软化至L≈0。9.

在两个主题中保持相同的对比目标；不要让颜色重音在黑暗背景上失去可读性（通常需要转移"Δ L"并降低饱和度）。

6）图像和视频中的文字

使用覆盖层（渐层/半透明层40-60%）或文本下方的条纹。
固定最低4。5：1在文本和本地条纹背景之间。
对于动态视频-自适应背景/帧亮度分析（中央/伪造区域的采样）。

7）状态和交互性

链接不仅要用颜色来区分：默认下划线或下划线到hover/focus+与普通文本的对比度≥ 3：1。
按钮：文本和图标≥ 4。5：1到填充；填充≥ 3：1到周围环境。

错误/成功/警告： 不要依赖颜色；添加图标/文本提示；提供最低4的文本对比度。5:1.

8）颜色感知受损的人

• Deuteranopia/Protanopia（红色和绿色区域）：避免使用"红色vs绿色"组合而没有其他特征。
• Tritanopia：分别检查蓝黄色对。
• 使形状和图形变得清晰：文本标签、不同的笔触/标记类型、填充图样、段签名。

9）印刷和背景

Kegl主文本：14-16 px最低（web）, 16-18 px用于内容区域。
字符串间距1。4–1.6以高对比度提高背景的可读性。
避免在对比度不足的情况下进行微妙的刻字。
彩色背景上的文本：减少背景饱和度和/或增加光度以达到目标关系。

10）图表,表格,图形

线条/列≥ 3：1到网格/背景。

轴和传说的签名≥ 4。5:1.

除颜色外,还使用不同的形状/模式。

11）动态/自适应对比

自动对比： 计算选定填充的文本的对比颜色（例如,通过OKLCH：选择"L"以达到4。5:1).

系统设置：尊重"prefers-countrast"、"forced-colors"、高端操作系统模式。
个性化：在应用程序中设置"高对比度"（增强"Δ L"，用更中性的品牌口音代替品牌，并通过形状/图标保持专有性）。

12）控制流程和自动化

12.1为设计师

检查布局（两个主题和关键背景）上的对比度。
在元件（标题/primary/secondary/hint）中输入"对比度插槽"。
记录每个组件的有效背景上下文。

12.2为开发人员

单位辅助器：令牌对测试中的对比度计算和散列函数。
带有对比度校验的视觉快照（屏幕渲染+通过样本进行计算L1/L2）。
Linters风格：禁止"原始"颜色，仅通过令牌。

12.3在CI/CD中

检查主题和状态中的所有"fg/bg"对。

违规情况报告,列出组件、选项、主题和实际值（例如3.9： 1与所需的4。5:1).

13） iGaming特点（可选）

生动的促销横幅和锦标赛卡片经常被"吞噬"文本。需要分段/覆盖并限制背景饱和度。
负责通知的系统元素（18+，限制，风险）-对比度AAA。
在排名/系数表中：数字和+/-符号≥ 4。5：1,胜利的亮点不仅仅是颜色（图标/标签）。

14）反模式

仅依靠颜色来区分状态。
彩色背景上的细灰色字体不计算对比度。
黑暗模式中的"深暗"，促销区中的"明亮"。
带有细节/噪音的背景中的文本没有条纹。

15）欢呼的支票清单

基本文本

[] ≥ 4.5：1（普通），≥ 3：1（大/脂肪）。

链接/按钮

• 第4 ≥按钮文本。5：1到填充。
• 状态的区分≥ 3：1或显式指标。

图标/边界

• ≥ 3-1到背景。

黑暗/光明主题

• 同样的对比目标已经实现。

媒体背景

• Overley/Plashka,系数保持不变。

可用性

• 除了颜色外，还有非摄影特征。

自动化

• CI/CD中关于令牌和组件的对比度测试。

16）引入令牌（示例符号）

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

注意：值近似值；通过计算特定主题的对比度来选择最后一个。

17）团队文档

在Gaidlines中指定：对比目标、忠实/错误对示例、关键组件的"fg × bg"矩阵、媒体背景规则以及如何启用"高对比度"模式。
保持实时的"排除和原因"页面（例如,允许3.8：1在主要显示标题的狭窄情况下）。

简短的摘要

对比度是可测量的参数而不是味觉。设置目标（AA/AAA）,通过令牌进行控制（最好是OKLCH）,自动检查CI和视觉布局,考虑深色/浅色主题和颜色视力受损的人。这样可以确保可读性，减少错误并提高转换率。