26 lines
2.6 KiB
Markdown
26 lines
2.6 KiB
Markdown
[VERDICT] Verdigris Gate is structurally safe, cleanly scoped, and transitions reliably. However, it requires a minor contrast fix and a critical font-weight correction to prevent text degradation.
|
|
|
|
### 1. WCAG AA Contrast
|
|
- [ERROR] Light Primary Button: `--on-accent` (#F0F7F5) on `--accent` (#2F7A6B) yields ~4.4:1 contrast. At 1.05rem (16.8px) 600-weight, this fails the 4.5:1 requirement for normal-sized text.
|
|
*Fix: Lighten `--on-accent` to `#FFFFFF` (yields 4.9:1) or darken `--accent` to `#2B7364`.*
|
|
- [OK] Light Mode Base: Body text (10.9:1), muted text (6.4:1), and accent-ink (#1F5F52, 5.6:1) on #E9EDEA all comfortably pass.
|
|
- [OK] Dark Mode Base: Body text, muted text (7.6:1), accent-ink (#6BC4B0, 8.5:1), and primary button (#0D1614 on #4DA896, 6.5:1) on #141A18 all pass.
|
|
|
|
### 2. Typography & Faux-Bold Risk
|
|
- [ERROR] Missing Font Weights: Fraunces and IBM Plex Mono are loaded at 400;500 but are heavily applied at 600 and 700 across headings, buttons, and pricing tiers. This will force destructive, browser-synthesized faux-bolding.
|
|
*Fix: Append `600;700` to both Fraunces and IBM Plex Mono in the `<link>` Google Fonts payload.*
|
|
|
|
### 3. app.js Logic & Skin Swapping
|
|
- [OK] 3-Way Cycle: Modulo logic (`(cur + 1) % SKINS.length`) safely iterates `ledger -> midnight -> verdigris` and gracefully fails to index 0 (`ledger`) on null or corrupt local storage states.
|
|
- [OK] Image Swapping: `swapSkinImages` uses `getAttribute("src")` to correctly capture the un-resolved relative string, strictly matching `VERDIGRIS_IMG` keys. Reversal logic using `data-orig-src` is sound.
|
|
- [WARN] Double-Download (LCP impact): Because image `src` is hardcoded in HTML, direct loads into the Verdigris skin will fetch the `orig` image first, then immediately request the Verdigris variant.
|
|
|
|
### 4. Specificity & Token Leaks
|
|
- [OK] Token Scoping: No token leakage. `html[data-skin="verdigris"]` (0,1,1) securely overrides `:root` (0,1,0) and detaches entirely when the attribute changes.
|
|
- [OK] Signature Elements: Override rules like `html[data-skin="verdigris"] .site-header` (0,2,1) successfully trump base class styles `.site-header` (0,1,0) without relying on `!important`.
|
|
|
|
### 5. Accessibility Regressions
|
|
- [OK] Focus Navigation: Verdigris `--accent` maintains strong visibility as an outline color (4.47:1 against paper), preserving keyboard interaction cues.
|
|
- [INFO] Stale Static Tooltip: The static HTML `title` and `aria-label` for `#skinToggle` only declare "Paper / Midnight".
|
|
*Fix: Update the initial static HTML to "Paper / Midnight / Verdigris" so pre-JS screen readers announce it accurately.*
|