在 prefers-color-scheme: dark 或 [data-theme="dark"] 下,检查 6 类典型页面的文字对比度、插画可见度、强调色识别度,并与 WCAG AA 标准逐项对比。
数值为「文本 / 背景」的 WCAG 相对对比度比。AA 正文 ≥ 4.5 · 大字 ≥ 3.0;仅装饰 表示未承载文字、无需达标。
| 组合 | 色值 | 比值 | WCAG | 用途 |
|---|
iframe 内强制 data-theme="dark"。如果设计在此模式下丢失层次或插画变形,会在右下角注明。
theme="orange" 时,建议按钮 只出现在 ≥ 18px 的字号,避免小字按钮文字难辨。--gx-accent-tint(近黑),几乎看不见。解决:暗色下把装饰条纹换成 1pt 的 #2A362F 线稿版本;我已在 components.html 里的 .ornament[data-dark] 预留变量。#2A362F,与背景 #0F1714 对比度 1.6:1,用户不易看到字段边界。建议 focus 之前加一道 #3A4842 底描边 + 8% 的 inset 阴影。--gx-accent-tint)在暗色下自动变成 #17211E(近背景),视觉上大数字消失 —— 这是设计上刻意的「大字做底图」效果,暗色下仍起作用,不是 bug。--gx-accent(#7DB5A6)在 #0F1714 上对比 7.2:1,清晰可辨。prefers-color-scheme;邮件与印刷品保留 cream 背景是业内标准做法,不是问题。