Skip to content

feat: high-contrast mode #596

Description

@InstaZDLL

Our secondary text is grey on grey by design, and for someone with low vision that design is the problem. There is no way to ask the app to be legible instead of elegant.

Shape

A mode that lifts contrast across the whole interface at once, rather than a pass over every component:

  • Secondary greys resolve to real contrast. Because colour lives in theme tokens, this is a token set rather than a component rewrite — which is the reason it is worth doing as a mode and not as a hundred small fixes.
  • Background blurs off. backdrop-filter behind text is the single biggest legibility cost in the current design, and it buys nothing to someone who needs the contrast.
  • Keyboard focus becomes unmistakable. Not a subtle ring — a visible, high-contrast outline that survives on every surface.
  • Controls that rely on subtlety get redrawn. Checkboxes and toggles that read as "filled versus not filled" at normal contrast need a real mark, not a shade change.

Our side

The five skins and fourteen themes already run entirely on tokens, and the artifact-level rule in app.css is that colour is defined once at the root and consumed everywhere else. That is what makes a contrast mode a palette rather than a fork — and it also means the mode has to compose with skin and theme selection rather than replace it.

Traps

  • Every skin must survive it. A mode that only works on one of the five is a mode that breaks four.
  • prefers-contrast: more exists, and someone who has set it system-wide should not have to find our toggle. Decide whether the OS preference selects the mode by default.
  • Do not let the mode become an excuse to skip contrast in the normal themes — this is for people who need more, not a place to put the contrast the default palette should already have.
  • New strings go to all 17 locales.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestplannedPlanned for a future releasescope: a11yAccessibility and keyboard navigationscope: frontendReact/Vite frontend (src/)type: featNew feature

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions