Skip to content

A11Y-001: the readiness score reads in the light theme - #998

Merged
NewWorldVenture merged 1 commit into
mainfrom
claude/a11y-001-readiness-score-etzqg7
Oct 11, 2026
Merged

NewWorldVenture merged 1 commit into
mainfrom
claude/a11y-001-readiness-score-etzqg7

Conversation

@NewWorldVenture

Copy link
Copy Markdown
Owner

A11Y-001: one of the light-theme leftovers from the signed-in sweep (#990).

The defect

/dashboard/command-center colours its readiness label ("On track", "Needs attention", "Action required") and its ring with Tailwind's green-500, amber-400 and red-400, written as inline hex. Those colours were picked against the dark theme. On the light theme's card (bg-surface/40 over --bg) the label reads:

Score Colour On the light card
85 and up #22c55e 2.19:1
60–84 #fbbf24 1.60:1
below 60 #f87171 2.65:1

The ring's track was rgba(255,255,255,0.08): white, so it disappeared on a white card.

The fix

  • The label and ring take the theme's status roles: text- and stroke- success, warning and danger. Those already hold 4.5:1 on every ground in both themes (tests/brand-contrast-contract.test.ts). The class names are written out whole, so Tailwind generates them.
  • The track is stroke-fg/10, which is visible in both themes and nearly what it was in the dark theme.
  • The page's score logic, labels and layout are unchanged.

Tests

tests/the-readiness-score-reads-in-the-light-theme.test.ts

  • The label and ring use the three roles, in order, and no inline hex or style={{ color }} remains.
  • Each role clears 4.5:1 on the card, computed from globals.css, in both themes.
  • Control: the replaced hex reads below 3:1 on the same light card.
Check main This branch
New test 3 of 4 fail 4/4
The 10 suites that name the command center, plus brand-contrast — 94/94
Full unit suite / tsc / eslint on the page — 30,936 passed (the 3 failures are this container's Node 22 against the pinned Node 24, red on main too) / 0 / clean

The page's other English literals ("On track", the issue counts) are an i18n matter and are not changed here.

No migration, configuration or dependency change.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TRY21ZKsFrfB3qtoP972A4


Generated by Claude Code

The command center's readiness label and ring were coloured with
Tailwind's green-500, amber-400 and red-400 as inline hex, picked against
the dark theme: 2.2, 1.6 and 2.7:1 on the light theme's card. They take
the theme's status roles now (text-/stroke-success, warning, danger),
which hold 4.5:1 in both themes, and the ring's track is fg/10 instead
of a white that vanished on a white card.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TRY21ZKsFrfB3qtoP972A4
@vercel

vercel Bot commented Oct 10, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated
bubaly Ignored Ignored Oct 10, 2026 6:38pm UTC

Request Review

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.

2 participants