双极性语义着色与 4.5:1 对比度守恒
浅色淡底色在暗色模式下的翻转陷阱、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 色彩空间中进行动态加权混色：
// 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（完全合规） |
示例加载中...
为什么禁用纯色相传递状态
全球有超过 8% 的男性存在红绿色弱或色盲。 铁律：禁止任何界面状态仅由颜色区分。必须同时提供几何图标变化与清晰的无障碍文本描述（例如红色的叉号加上“操作失败”文本标签），确保信息对所有人无歧视传达。