A11Y-001: the light theme's 500 and 600 palette text is readable

[NewWorldVenture]

A11Y-001: extends #991's light-theme palette remap to the 500 and 600 shades.

The defect

#991 gave each hue's text-<hue>-200/300/400 a darker colour in .light. The app also writes the 500 and 600 shades into class names: 262 times in 73 files. The most common are text-amber-500 (74), text-emerald-500 (44), text-emerald-600 (28), text-amber-600 (27) and text-rose-500 (24). Many are light-first class strings (text-amber-600 dark:text-amber-400). Held to #991's bar (4.5:1 on white, on --bg and on the hue's own 500/20 chip tint), every 500 and every 600 but indigo's fails:

Shade	Worst ratio, by hue
500	1.59 (yellow) to 3.26 (indigo)
600	2.43 (yellow) to 4.17 (violet); indigo-600 passes at 4.59

The fix

The same block, the same rule shape, the same targets. The block is regenerated by the script that reproduces #991's rules byte for byte for 200–400, with 500 and 600 added for every hue where the shade itself fails:

• Selectors: each failing 500/600, its hover: and group-hover: forms, and any slash variant the source uses take the hue's existing target (for example emerald-800 or rose-700).
• Exclusions: the same as A11Y-001: the light theme's raw palette text is readable #991. Marketing pages, anything in or under .dark, and anything in or under .keep-dark-palette keep their shades (Kitchen Mode's text-amber-600 stays as it is).
• Specificity: unchanged. A base rule has its Tailwind class's specificity, so an appended variant (md:, dark:) still wins. A hover or group-hover rule carries one more class than the variant it replaces.
• indigo-600: left alone, since it already clears the bar.

Dark theme: unchanged.

Tests

tests/light-theme-palette-text-is-readable.test.ts (#991's) is extended rather than duplicated:

• It knows Tailwind's 600s as well as its 500s, and computes which 500/600 need a rule with the same bar the rules are held to. Non-vacuity: every 500 needs one, and of the 600s only indigo's does not.
• The coverage check reads 200 to 600 and now also requires a base rule for every base class the source uses. Before, it checked only that the hue had rules at all.
• The specificity check counts one base, hover and group-hover selector per remapped shade, computed rather than fixed at 3 × hues.

Check	main	This branch
Palette unit test	2 of 6 fail (coverage lists the uncovered classes, 46 lines for text-amber-500 alone; the specificity count)	6/6
Generator, 200–400 only, against main	byte-identical to #991's block	—
axe color-contrast, light theme, 246 signed-in routes, 1280 px (author-run, local, production builds of main a9b7e87 and this branch, empty household)	14 nodes on 12 routes	6 on 6
Same, 390 px	58 on 17	50 on 11 (40 of them /display, the axe background-propagation reading described in #991)
Routes with more serious/critical findings than on main	—	0 at either width
tests/e2e/light-theme-palette-in-the-browser.spec.ts (#991's cascade proof: exclusions, hover, slash, Kitchen Mode, the display), against this branch's build	—	7/7; Kitchen Mode's check now also covers its text-amber-600 heading
The 12 suites that read globals.css / full unit suite / tsc	—	83/83 / 30,942 passed (the 3 failures are this container's Node 22 against the pinned Node 24, red on main too) / 0

What is left in the light theme (1280 px, this branch)

Six nodes, none of them palette text:

• The command center's readiness label: inline hex, fixed in A11Y-001: the readiness score reads in the light theme #998.
• text-accent on its own bg-accent/15: the sync direction chip and every accent Badge, 3.87:1. The same shape as A11Y-001: a status chip's text is readable on its own tint #994's status roles, with accent the one role it left out. Next.
• text-muted on the bg-brand/10 selection tint: the active conversation row, 4.39:1. Next.
• The read-only email field in settings (two routes): opacity-60 takes its text to 4.49:1. Next.
• White on a hovered primary button: /dashboard/chores here. At 390 px it appears on seven routes, five through the shared Button and two inline bg-brand … hover:bg-brand/90. hover:bg-brand/90 lightens --brand until white reads 4.18–4.21:1. The sweep's pointer happened to rest on these buttons. The shared Button is outside what I touch, so this one is yours to decide (a darker hover, or a slightly darker --brand).

No component, configuration or dependency change.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TRY21ZKsFrfB3qtoP972A4

---

Generated by Claude Code

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated
bubaly	Ignored		Oct 10, 2026 7:24pm UTC