QA Report · E2

暗色模式 QA

prefers-color-scheme: dark[data-theme="dark"] 下,检查 6 类典型页面的文字对比度、插画可见度、强调色识别度,并与 WCAG AA 标准逐项对比。

总览

检查页面
6
Token 对照
14 · AA 通过
提醒 / Warn
3
阻断 / Bug
0

Token 对比度(暗色模式)

数值为「文本 / 背景」的 WCAG 相对对比度比。AA 正文 ≥ 4.5 · 大字 ≥ 3.0;仅装饰 表示未承载文字、无需达标。

组合色值比值WCAG用途

关键页面暗色预览

iframe 内强制 data-theme="dark"。如果设计在此模式下丢失层次或插画变形,会在右下角注明。

发现项

  1. Nit Book Cloth 橙 (#C15F3C) 在暗色下 hover 态与文字 #E4ECE3 对比度 3.1:1,仅满足大字(≥24px)AA。改由 Tweak 切换到 theme="orange" 时,建议按钮 只出现在 ≥ 18px 的字号,避免小字按钮文字难辨。
  2. Nit 壮锦装饰条纹 在暗色下颜色被自动压到 --gx-accent-tint(近黑),几乎看不见。解决:暗色下把装饰条纹换成 1pt 的 #2A362F 线稿版本;我已在 components.html 里的 .ornament[data-dark] 预留变量。
  3. Nit Contact 页面 input 边框 在暗色下为 #2A362F,与背景 #0F1714 对比度 1.6:1,用户不易看到字段边界。建议 focus 之前加一道 #3A4842 底描边 + 8% 的 inset 阴影。
  4. OK case 块的大数字--gx-accent-tint)在暗色下自动变成 #17211E(近背景),视觉上大数字消失 —— 这是设计上刻意的「大字做底图」效果,暗色下仍起作用,不是 bug。
  5. OK Logo 印章 暗色 fallback:印章用 --gx-accent(#7DB5A6)在 #0F1714 上对比 7.2:1,清晰可辨。
  6. OK 信合单据(email、brochure)刻意固定为浅色 —— 邮件客户端不支持 prefers-color-scheme;邮件与印刷品保留 cream 背景是业内标准做法,不是问题。