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

3 participants