Dark themes: primary buttons are white on light teal — contrast 2.0–2.3:1 (hardcoded #fff on a lightened --glacier) #691

New issue

Closed

opened 2026-09-23 10:25:54 +00:00 by Cordy · 0 comments

Cordy commented

2026-09-23 10:25:54 +00:00

Owner

Found by the #656 QA pass, §3 UI consistency audit (v0.6.247, files). Themes were switched via Appearance, which is a per-browser pref.

Style-guide rule: tokens drive colour ("Hardcoded colors in new work are wrong unless they carry a var() with a fallback"). Primary = --glacier fill with white text. The dark themes lighten --glacier, but the text stays a hardcoded rgb(255,255,255) (button.primary, label.btn.primary {color: #fff}, and the same for .btn.dangerbtn, #avatarbtn and .copied-bubble).

Measured on the "Upload file" primary:

Theme	Text / fill	Contrast
Light	#fff / rgb(47,127,143)	4.61 ✅
Night (`dark`)	#fff / rgb(77,184,201)	2.33
Dusk	#fff / rgb(111,185,199)	2.22
Ebony (`black`)	#fff / rgb(116,195,209)	2.01
Slate	#fff / rgb(80,192,212)	2.14

WCAG AA for 13px text needs 4.5:1. In all four dark themes the primary action label is hard to read (see the pale "Upload file" in the screenshots).

Fix direction: an --on-accent token per theme (dark ink on the lightened accent) used for primary/danger text instead of #fff.

Related static scan: about 100 colour declarations in the live stylesheet don't go through var(). Most are deliberate state tints, but a few are off-token Tailwind greys that won't follow the themes: .rochip {background:#e5e7eb; color:#374151}, ul.plainlist .muted/.empty {color:#6b7280}, and .kvbadge.good/.teal fixed tints. No light surface bled through in the dark themes on the surfaces I checked (file list, pane, Shares, 7 admin panes).

Screenshots: 656-theme-night.jpg, 656-theme-dusk.jpg, 656-theme-ebony.jpg, 656-theme-slate.jpg

Found by the #656 QA pass, §3 UI consistency audit (v0.6.247, files). Themes were switched via Appearance, which is a per-browser pref. **Style-guide rule:** tokens drive colour ("Hardcoded colors in new work are wrong unless they carry a var() with a fallback"). Primary = `--glacier` fill with white text. The dark themes lighten `--glacier`, but the text stays a hardcoded `rgb(255,255,255)` (`button.primary, label.btn.primary {color: #fff}`, and the same for `.btn.dangerbtn`, `#avatarbtn` and `.copied-bubble`). **Measured** on the "Upload file" primary: | Theme | Text / fill | Contrast | |---|---|---| | Light | #fff / rgb(47,127,143) | 4.61 ✅ | | Night (`dark`) | #fff / rgb(77,184,201) | **2.33** | | Dusk | #fff / rgb(111,185,199) | **2.22** | | Ebony (`black`) | #fff / rgb(116,195,209) | **2.01** | | Slate | #fff / rgb(80,192,212) | **2.14** | WCAG AA for 13px text needs 4.5:1. In all four dark themes the primary action label is hard to read (see the pale "Upload file" in the screenshots). **Fix direction:** an `--on-accent` token per theme (dark ink on the lightened accent) used for primary/danger text instead of `#fff`. Related static scan: about 100 colour declarations in the live stylesheet don't go through `var()`. Most are deliberate state tints, but a few are off-token Tailwind greys that won't follow the themes: `.rochip {background:#e5e7eb; color:#374151}`, `ul.plainlist .muted/.empty {color:#6b7280}`, and `.kvbadge.good`/`.teal` fixed tints. No light surface bled through in the dark themes on the surfaces I checked (file list, pane, Shares, 7 admin panes). **Screenshots:** `656-theme-night.jpg`, `656-theme-dusk.jpg`, `656-theme-ebony.jpg`, `656-theme-slate.jpg`