René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Add an \"Increase contrast\" accessibility setting to Appearance","articleBody":"## Problem or Motivation\n\nOpenWork's **Settings → Appearance → Interface** section already offers one\naccessibility affordance — the **Reduce motion** toggle (shipped in #51). But it\nhas **no way to increase visual contrast**. Today the app's borders, dividers,\ninput outlines and secondary/\"muted\" text are intentionally low-contrast\n(derived from `--foreground` at very low alpha, e.g. `--border` is\n`oklch(from var(--foreground) l c h / 0.05)` and `--muted-foreground` is only a\n50% mix in `apps/electron/src/renderer/index.css`). That looks clean but is hard\nto read for low-vision users and in bright environments.\n\nIncreasing contrast is a standard desktop-app accessibility control that\nOpenWork's peers expose and OpenWork lacks:\n\n- **macOS** — System Settings → Accessibility → Display → **Increase contrast**.\n- **Windows** — **Contrast themes**.\n- **VS Code** (which Claude Code / Codex desktop build on) — dedicated\n  **High Contrast** themes.\n- **Claude Desktop / ChatGPT desktop** — standing accessibility asks for a\n  higher-contrast reading mode.\n\nReduce motion is already here; **Increase contrast** is its natural companion in\nthe same Interface section.\n\n## Proposed Solution\n\nAdd an **\"Increase contrast\"** toggle to **Settings → Appearance → Interface**,\ndirectly below the existing **Reduce motion** toggle. It is a renderer-only,\nfrontend preference — no backend involvement:\n\n- Persist it in `localStorage` (new key `craft-high-contrast`), mirroring\n  `Reduce motion`'s `craft-reduce-motion` and the other lightweight prefs in\n  `apps/electron/src/renderer/lib/local-storage.ts`.\n- Provide it app-wide via a small `HighContrastProvider` context (mirroring\n  `ReduceMotionContext`), wired in `main.tsx`.\n- When enabled, set `data-high-contrast=\"true\"` on `\u003chtml\u003e`. A global CSS block\n  in `index.css` gated on `:root[data-high-contrast='true']` then **raises the\n  contrast of theme tokens** — strengthening `--border`, `--input`,\n  `--muted-foreground`, `--foreground-dimmed` and the focus `--ring`, and adding\n  a visible focus outline. Because every theme derives these tokens from\n  `--foreground` (which flips per light/dark), the alpha-based overrides work in\n  **both light and dark** and across preset themes.\n- Add two i18n keys (`settings.appearance.increaseContrast` /\n  `...Desc`) across all **7** locales, matching how `reduceMotion` is localized.\n\nOff by default, so existing users see no change.\n\n## Feasibility\n\n**Frontend-only — confirmed feasible.** This is the exact mechanism the merged\n`Reduce motion` feature uses (localStorage pref → React context → `\u003chtml\u003e` data\nattribute → CSS guard). No qwen-code backend change is required. Theme variables\nare injected as a `:root { … }` stylesheet rule\n(`ThemeContext.tsx`), so a higher-specificity `:root[data-high-contrast='true']`\nselector overrides them cleanly without `!important`.\n\n## Acceptance Criteria (what the CDP assertion will check)\n\nDriven over CDP in the draft/no-session state (no backend), mirroring the\n`reduce-motion` assertion:\n\n1. Open **Settings → Appearance**; the **Increase contrast** toggle renders and\n   is **off** initially, with no `data-high-contrast` attribute on `\u003chtml\u003e`.\n2. Enabling it: the switch reads `aria-checked=\"true\"`, `\u003chtml\u003e` gains\n   `data-high-contrast=\"true\"`, `localStorage['craft-high-contrast'] === \"true\"`,\n   and the high-contrast CSS actually applies (a dedicated\n   `--hc-enabled` custom property computes to `1` on `:root`).\n3. Disabling it reverts all four: switch off, attribute removed,\n   `localStorage` `\"false\"`, and `--hc-enabled` no longer `1` — proving it both\n   applies and reverts, not merely renders.\n","author":{"url":"https://github.com/DragonnZhang","@type":"Person","name":"DragonnZhang"},"datePublished":"2026-07-07T13:28:50.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/66/openwork/issues/66"}