Skip to content

New card theme: high-contrast (accessibility) - #39

Open
dchaudhari7177 wants to merge 1 commit into
notsointresting:mainfrom
dchaudhari7177:feat/theme-high-contrast
Open

New card theme: high-contrast (accessibility)#39
dchaudhari7177 wants to merge 1 commit into
notsointresting:mainfrom
dchaudhari7177:feat/theme-high-contrast

Conversation

@dchaudhari7177

Copy link
Copy Markdown
Contributor

Every current theme is an aesthetic palette; none targets accessibility. This adds high-contrast, built to a contrast budget rather than a mood.

Measured ratios

Every text token clears WCAG AAA (7:1) against both the page background and the stat panel — not just against bg, since the big numbers sit on panel:

token hex vs bg #000000 vs panel #1c1c1c
fg #ffffff 21.00 : 1 17.04 : 1
muted #d0d0d0 13.62 : 1 11.05 : 1
accent #ffd60a 14.88 : 1 12.07 : 1

The amber accent is deliberate: it stays distinguishable under the common red-green colour-vision deficiencies, which a green or red accent would not.

Test

Per the issue, the test asserts the computed contrast ratio, not just hex format. It adds a small dependency-free WCAG 2.1 luminance/ratio helper (matching the project's zero-dep stance), and:

  • every text token is >= 7:1 against bg and panel;
  • high-contrast is verifiably the highest-contrast theme registered — a regression guard if someone later tweaks it;
  • the helper itself is checked against the WCAG reference values (white/black = 21:1, identical colours = 1:1), so a broken helper can't silently pass the theme.

Typecheck and the full suite are green.

Closes #35

@notsointresting

Copy link
Copy Markdown
Owner

Conflict against main now — a few other PRs touching src/cli.ts/themes/index.ts landed first. Could you rebase onto main and resolve? Should just be re-applying your change alongside the others already merged.

Every existing theme is an aesthetic palette; none targets accessibility. Add
high-contrast, where each text token clears WCAG AAA (7:1) against both the page
background and the stat panel:

  fg     #ffffff  21.00 : 1 vs bg, 17.04 : 1 vs panel
  muted  #d0d0d0  13.62 : 1 vs bg, 11.05 : 1 vs panel
  accent #ffd60a  14.88 : 1 vs bg, 12.07 : 1 vs panel

The amber accent stays distinguishable under red-green colour-vision
deficiencies, which a green or red accent would not.

The test asserts the computed contrast ratios rather than hex format alone, via
a small dependency-free WCAG luminance/ratio helper that is itself checked
against the reference 21:1 and 1:1 values.

Closes notsointresting#35
@dchaudhari7177
dchaudhari7177 force-pushed the feat/theme-high-contrast branch from 90baf21 to 068431a Compare July 23, 2026 15:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

New card theme: high-contrast (accessibility)

3 participants