---
title: 双极性语义着色与 4.5:1 对比度守恒
description: 浅色淡底色在暗色模式下的翻转陷阱、color-mix 墨水融合公式与 WCAG 4.5:1 全场景对比度实测。
---

# 双极性语义着色与 4.5:1 对比度守恒

在多主题设计中，语义色（危险红、成功绿、警告黄、信息蓝）在深浅两种模式下必须具备自适应的数学融合能力。

## 浅色淡色调在暗色下的着色灾难

传统组件库在浅色模式下通常提供 `-light-9` 等极淡背景（如浅红 `#fef0f0` 搭配深红文字）。
进入暗色模式后，如果直接将背景色反向变暗：
- 浅色模式的高亮背景会在暗黑底盘上变成一块**刺眼的纯白硬块**。
- 如果将文字颜色简单做反色，色相本身在极淡背景上常常无法达到 WCAG 2.1 AA 标准的 4.5:1 最小对比度要求（实测仅有 2.08:1），导致文字完全看不清。

## color-mix 墨水融合公式

TuffEx 的解决方案是：**语义文字墨水绝不直接取用纯色相，而是将其与主墨水（`--tx-text-color-primary`）在 sRGB 色彩空间中进行动态加权混色**：

:::TuffCodeBlock{lang="scss"}
---
code: |
  // TxModeChip 的墨水：色相按占比混进主文字色
  --tx-mode-chip-ink: color-mix(
    in srgb,
    var(--tx-color-danger, #f56c6c) 55%, // is-danger
    var(--tx-text-color-primary, #303133)
  );
  // is-success：var(--tx-color-success, #67c23a) 45%
  // is-warning：var(--tx-color-warning, #e6a23c) 45%
  // is-info：   var(--tx-color-primary, #409eff) 50%
---
:::

占比按色相分开定：危险 55%，成功与警告 45%，信息 50%。信息色取主色 `--tx-color-primary`，因为 `--tx-color-info` 是灰色，看起来会像 muted 弱化态。

- 在浅色模式下，主墨水为深灰色，混色后文字自动向下压暗，保证在浅色背景上足够清晰。
- 在暗色模式下，主墨水为近白色，混色后文字自动向上提亮，保证在深色底板上发光通透。

## WCAG 2.1 4.5:1 实测守恒表

在 13px 文本尺度下的真实测量数据：

| 语义色系 | 传统纯色相对比度 | TuffEx color-mix 实测对比度 | 达标状态 |
|---|---|---|---|
| **Danger (危险)** | 2.61:1（模糊不达标） | **5.07:1** | **PASS（完全合规）** |
| **Success (成功)** | 2.08:1（发灰难以识别） | **5.18:1** | **PASS（完全合规）** |
| **Warning (警告)** | 2.03:1（黄褐色脏污） | **5.11:1** | **PASS（完全合规）** |
| **Info / Primary** | 2.53:1（反差微弱） | **5.32:1** | **PASS（完全合规）** |

:::TuffDemoWrapper{demo="ConceptColorMixContrastDemo"}
:::

## 为什么禁用纯色相传递状态

全球有超过 8% 的男性存在红绿色弱或色盲。
**铁律：禁止任何界面状态仅由颜色区分**。必须同时提供几何图标变化与清晰的无障碍文本描述（例如红色的叉号加上“操作失败”文本标签），确保信息对所有人无歧视传达。