UI: add a high contrast mode
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 56/100
- Issue type
- Feature
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- css, next.js, typescript
- Domain
- accessibility, design, frontend
Research direction
Start with the design tokens in app/globals.css and the theme toggle in components/layout/; trace how the app currently applies light and dark themes. Run pnpm dev and check the interface with high-contrast preferences and Windows forced colors. Done means both themes meet the stated contrast ratios, important UI elements remain visible in forced colors, and Lighthouse accessibility stays at 100.
Written by the indexing model from the issue text.
Description
Summary
Add a high contrast option to DesignHub's own interface (not the user's brand): stronger borders, no low-contrast muted text, solid focus rings, and support for prefers-contrast: more and Windows forced-colors.
Where to look
app/globals.css: the design tokens for the app theme- The theme toggle in
components/layout/
Behaviour
- Implement it as a token layer (for example
[data-contrast="more"]overrides) so components need few changes; follow the system preference by default.
Acceptance criteria
- All app text reaches 7:1 and UI boundaries 4.5:1 in high contrast mode, in light and dark.
- Nothing disappears under
forced-colors: active(check icons, focus rings, selected states). - Lighthouse accessibility stays at 100.
Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build. See CONTRIBUTING.md for code style and the template, mockup and export-format guides.
Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.
- Dominant language
- TypeScript
- Stars
- 11
- Forks
- 3
- Avg merge
- 4h 4m
- Merged PRs (30d)
- 74
Getting set up
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from yakew7/DesignHub
-
area: projects difficulty: medium enhancement help wanted performance v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 55/100
Maintainers usually reply within 1 day
-
area: backgrounds difficulty: hard enhancement help wanted performance v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
dependencies difficulty: easy enhancement help wanted v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
area: mockups area: social difficulty: medium enhancement help wanted performance v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 65/100
Maintainers usually reply within 1 day
-
area: ui difficulty: medium enhancement help wanted performance v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 68/100
Maintainers usually reply within 1 day
All issues in yakew7/DesignHub
Similar issues
-
Difficulty 1/5 Under an hour Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
juice-shop/juice-shop#3706 ·
Maintainers usually reply within 1 day
-
sbx up from a subfolder silently pushes the whole work treePossibly taken @pdettori claimed this today. Openenhancement
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
outline/outline#14348 · 1 comment ·
Maintainers usually reply within 1 day
-
bug needs-triage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day