Skip to content

fix(app): raise muted ink tokens to WCAG AA in both colour schemes - #45

Open
jdjioe5-cpu wants to merge 1 commit into
Kinlock-Org:mainfrom
jdjioe5-cpu:fix/contrast-muted-tokens
Open

jdjioe5-cpu wants to merge 1 commit into
Kinlock-Org:mainfrom
jdjioe5-cpu:fix/contrast-muted-tokens

Conversation

@jdjioe5-cpu

Copy link
Copy Markdown

What and why

Closes #38.
Audited and repaired landing-page step labels, footer disclaimer, and \LagNotice\ text contrast to strictly comply with WCAG AA body copy contrast requirements ($\ge 4.5:1$) in both light and dark colour schemes, replacing fragile and failing raw ink opacities (\ ext-ink/50\ and \ ext-ink/60) with semantic tokens.

Changes

  • \�pp/globals.css:
    • Defined --muted: #525a56;\ in light mode (relative luminance 0.0992, contrast ratio 6.54:1 against --paper: #f6f7f5).
    • Defined --muted: #949f99;\ in dark mode (relative luminance 0.3380, contrast ratio 6.74:1 against --paper: #0f1512).
    • Registered --color-muted: var(--muted);\ under Tailwind v4 @theme\ so \ ext-muted\ is universally available.
    • Added documentation comments in \globals.css\ detailing palette rules and WCAG constraints to prevent regressions.
  • \�pp/(marketing)/page.tsx:
    • Replaced \ ext-ink/50\ in step numbers with \ ext-muted.
    • Replaced \ ext-ink/60\ in footer disclaimer with \ ext-muted.
  • \components/indexer/LagNotice.tsx:
    • Replaced \ ext-ink/60\ with \ ext-muted.
  • \lib/contrast.test.ts:
    • Added 49 unit tests implementing exact WCAG 2.1 relative luminance and contrast ratio formulas.
    • Verified --muted\ achieves $\ge 4.5:1$ in both light and dark modes.
    • Proved that previous raw opacities failed or skirted the threshold on light paper: \ ext-ink/50\ composited is 3.30:1 (fails AA), and \ ext-ink/60\ is 4.54:1 (dangerously fragile).
    • Added an automated codebase scan guarding \�pp/\ and \components/\ against any reintroduction of \ ext-ink/50\ or \ ext-ink/60.
  • \ROADMAP.md:
    • Added Changelog entry; \M3-17\ remains \IN PROGRESS\ pending remaining keyboard navigation and focus enhancements.

Hard rules / invariants touched

  • AGENTS.md §8.3 (Accessibility as required; contrast ratio $\ge 4.5:1$ for body copy).
  • Invariant numbers: none (no contract, auth, or claim-link-fragment logic touched).

Measured Contrast Ratios

  • Light mode (--paper: #f6f7f5):
    • --ink: #141a17: 16.42:1 (WCAG AA pass)
    • --muted: #525a56: 6.54:1 (WCAG AA pass $\ge 4.5:1$)
    • (Previous \ ext-ink/50\ equivalent: 3.30:1 — failed)
    • (Previous \ ext-ink/60\ equivalent: 4.54:1 — fragile)
  • Dark mode (--paper: #0f1512):
    • --ink: #e8ede9: 15.60:1 (WCAG AA pass)
    • --muted: #949f99: 6.74:1 (WCAG AA pass $\ge 4.5:1$)

Tests

All verification commands executed locally and passed with zero errors or warnings:

\
$ pnpm lint

biome check .
Checked 84 files in 21ms. No fixes applied.

$ pnpm typecheck

tsc --noEmit

$ pnpm test

vitest run
Test Files 16 passed (16)
Tests 215 passed (215)
Duration 820ms

$ pnpm build

next build
▲ Next.js 16.3.8 (Turbopack)
✓ Compiled successfully in 478ms
✓ Generating static pages using 14 workers (6/6) in 448ms
Finalizing page optimization ...
\\

Docs / ADR

  • Updated \�pp/globals.css\ with design palette and WCAG documentation.
  • Updated \ROADMAP.md.

Roadmap

  • \M3-17\ (status unchanged, \IN PROGRESS).
  • Changelog entry added: yes.

Assumptions and open questions

None. Diff strictly respects project structure boundaries and introduces zero new dependencies.

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.

Fix the low-contrast ink opacities and pin contrast so they cannot regress

2 participants