a11y(themes): solarized-light 正文对比度 4.27:1 低于 WCAG AA(需先决定是否为无障碍牺牲主题保真度)
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 401
- Avg merge
- 21h 48m
- Merged PRs (30d)
- 776
Description
## 问题描述 / What happened
`solarized-light` 主题下**所有正文**的对比度是 **4.27:1**,低于 WCAG AA 对正文要求的 4.5:1。
不是某个组件的问题:该主题把 `text-primary` override 成 `#757575`,配它自己的 `surface` `#fdf6e3`,于是凡是用主文字色的地方都是这个值。
发现于 #897(引用块对比度)的验证过程——那个 PR 给全部 11 个内置主题跑了一遍对比度实测,这是唯一一个正文不达标的主题。
## 实测数据
用 #897 新增的 `apps/desktop/src/renderer/themes/__tests__/blockquoteContrast.test.ts` 里的 `luminance()` / `contrastRatio()` 可复现(WCAG 2.x 公式):
| 主题 | surface | text-primary | 正文对比度 |
|---|---|---|---|
| **solarized-light** | `#fdf6e3` | `#757575` | **4.27:1** ❌ |
| default-light | `#f8f8f6` | `#262626` | 14.23:1 |
| atom-one-light | `#FAFAFA` | `#383A42` | 10.86:1 |
| cindy-light | `#EDEDED` | `#3C3F43` | 9.04:1 |
| default-dark | `#1f1f1e` | `#d4d4d4` | 11.13:1 |
| one-dark-pro | `#282c34` | `#abb2bf` | 6.57:1(全部 dark 主题中最低) |
## ⚠️ 但这条不是「调深就行」——需要产品判断
查了一下 Solarized 官方色板:正文色 `base00` = `#657b83`,浅色底 `base3` = `#fdf6e3`,**两者对比度只有 4.13:1** —— 也就是说 **Solarized 这套配色本身就不满足 WCAG AA**,这是它广为人知的取舍(刻意压低对比度以降低眼睛疲劳)。当前主题用的 `#757575`(4.27:1)其实比官方 `base00` 还略高一点。
所以摆在面前的是三个选项,不是一个 bug:
1. **接受现状** —— 它是用户主动选择的可选主题,低对比度就是 Solarized 的特征。代价:该主题下无障碍不达标。
2. **调深到 ≥4.5:1** —— 代价:偏离 Solarized 官方色板,主题失去辨识度,"solarized" 这个名字会名不副实。
3. **保证相对关系** —— 不改绝对值,但确保没有任何元素比该主题的正文更弱(#897 已经在引用块上做到了这一点:引用正文 === 该主题的 `text-primary`)。
倾向 1 或 3;选 2 之前应该先确认我们要不要为无障碍牺牲主题保真度。
## 相关代码
- 主题定义:`apps/desktop/src/renderer/themes/` 下的 solarized-light 主题文件(`SOLARIZED_LIGHT_ID`,见 `theme-ids.ts` / `registry.ts`)
- 对比度计算工具:`apps/desktop/src/renderer/themes/__tests__/blockquoteContrast.test.ts`
- 若决定加全局守卫(所有主题正文 ≥ 4.5:1),注意它会立刻在这个主题上失败——先决策再加测试
## 环境 / Environment
- Cindy 版本或 commit / version or commit:`main`(当前 HEAD)
- 平台与版本 / platform & OS version:全平台(主题层,与 OS 无关)
- 安装方式 / install method:不限
## 复现步骤 / Steps to reproduce
1. 设置里把主题切到 Solarized Light。
2. 看任意会话正文。
3. 或直接跑对比度计算:`exportThemeColors(builtinThemes['solarized-light'])` 解析 `text-primary` 与 `surface`,算 WCAG 对比度 → 4.27:1。
Contributor guide
Research direction
Read the solarized-light theme definition under apps/desktop/src/renderer/themes/, including its SOLARIZED_LIGHT_ID registration in theme-ids.ts and registry.ts. Run the luminance() and contrastRatio() checks in apps/desktop/src/renderer/themes/__tests__/blockquoteContrast.test.ts to confirm the 4.27:1 result. Done requires a product decision on theme fidelity versus WCAG AA, followed by updating the theme or documenting the accepted behavior and adding the agreed coverage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100