fix(a11y): improve contrast on mono labels for WCAG AA compliance

[aafre]

Summary

Lighthouse mobile audit on the homepage flagged three WCAG AA contrast failures on small text. This PR fixes all three by introducing a higher-contrast green token for mono eyebrow labels and darkening two specific small-text instances that used text-stone-warm at text-xs size.

Failing nodes (before):

• section.relative > … > span.font-mono — text-accent (#00d47e) on chalk = ~1.87:1 ❌
• section.relative > … > p.font-mono — text-stone-warm (#8a8680) at text-xs on white = ~3.46:1 ❌
• section.bg-chalk > … > p.text-xs — text-stone-warm at text-xs on chalk = ~3.46:1 ❌

WCAG AA requires 4.5:1 for normal/small text (< 18px).

Changes

File	Change
tailwind.config.js	Add accent-text: '#007a48' token (5.18:1 on chalk ✅)
20 component files	Replace text-accent → text-accent-text in all 63 light-bg mono eyebrow labels
LandingPage.tsx:631	Preserved text-accent on dark CTA section (bg-ink) where it passes at ~10:1
LandingPage.tsx:225	text-stone-warm → text-ink/60 on hero trust badge (text-xs)
LandingPage.tsx:322	text-stone-warm → text-ink/60 on company marquee disclaimer (text-xs)

Contrast ratios after fix:

• #007a48 on chalk (#fafaf8): 5.18:1 ✅ passes WCAG AA for small text
• text-ink/60 on chalk: ~4.59:1 ✅ passes WCAG AA for small text
• text-accent on ink (#0c0c0c, dark CTA): ~10:1 ✅ unchanged

Test plan

• npx vitest run — 1445 tests pass, 0 failures
• ESLint clean on all changed files (0 new issues)
• Verified LandingPage.tsx:631 (dark CTA) preserved as text-accent
• 63 light-bg mono labels confirmed replaced via grep
• Reviewer manual smoke: Run Lighthouse mobile audit on homepage — Accessibility score should reach 100 (was 96). Visual check: eyebrow labels still readable and on-brand.

Risk: LOW

CSS color-only change across 21 files. Rollback = git revert HEAD. No layout, logic, or data changes.

Note: 48h attribution gap

Per project convention, hold merge until ≥48h after PR #556 (VideoObject removal) merges so GSC impression movement can be cleanly attributed to each change.

Related

• Context: C:\Users\Amit\.claude\plans\stg-backlog-context.md
• Release plan: C-1 (color contrast fix)

[gemini-code-assist]

Code Review

This pull request introduces a new Tailwind color configuration, accent-text (#007a48), and updates various components to use text-accent-text instead of text-accent for eyebrow and header text elements. It also updates some text colors in LandingPage.tsx from text-stone-warm to text-ink/60. The reviewer identified accessibility issues in BlogIndex.tsx, AIResumePromptsHub.tsx, and ResumeKeywordsHub.tsx, where using text-accent-text inside dark containers reduces the contrast ratio below WCAG AA guidelines (minimum 4.5:1). Reverting these specific elements back to text-accent is recommended to maintain readability and compliance.

[gemini-code-assist]

This label is rendered inside a dark container (bg-ink). Changing the text color from text-accent (#00d47e) to text-accent-text (#007a48) reduces the contrast ratio to ~3.38:1, which violates WCAG AA guidelines for small text (minimum 4.5:1). It should remain text-accent on dark backgrounds to maintain readability and compliance.

Suggested change

	<span className="font-mono text-xs tracking-[0.15em] text-accent-text uppercase">
	<span className="font-mono text-xs tracking-[0.15em] text-accent uppercase">

[aafre]

@gemini-code-assist Good catch — fixed in 66be5a9. This is the dark CTA section (bg-ink) identical to the LandingPage case I already handled. Restored to text-accent (#00d47e) which gives ~10:1 on the dark background.

[gemini-code-assist]

Thank you for addressing the contrast issue. It's great to hear that restoring text-accent resolves the WCAG AA compliance for this dark background section.

[gemini-code-assist]

This label is rendered inside a dark container (bg-ink). Changing the text color from text-accent (#00d47e) to text-accent-text (#007a48) reduces the contrast ratio to ~3.38:1, which violates WCAG AA guidelines for small text (minimum 4.5:1). It should remain text-accent on dark backgrounds to maintain readability and compliance.

Suggested change

	<span className="font-mono text-xs tracking-[0.15em] text-accent-text uppercase mb-6 block">
	<span className="font-mono text-xs tracking-[0.15em] text-accent uppercase mb-6 block">

[aafre]

@gemini-code-assist Good catch — fixed in 66be5a9. This is the dark CTA section (bg-ink) identical to the LandingPage case I already handled. Restored to text-accent (#00d47e) which gives ~10:1 on the dark background.

[gemini-code-assist]

Thanks for the clarification, aafre. That makes sense. Since you've already verified that the contrast ratio is ~10:1 on the dark background, keeping text-accent in that specific section is the correct approach for both accessibility and design consistency.

[gemini-code-assist]

This label is rendered inside a dark container (bg-ink). Changing the text color from text-accent (#00d47e) to text-accent-text (#007a48) reduces the contrast ratio to ~3.38:1, which violates WCAG AA guidelines for small text (minimum 4.5:1). It should remain text-accent on dark backgrounds to maintain readability and compliance.

Suggested change

	<span className="font-mono text-xs tracking-[0.15em] text-accent-text uppercase mb-3 block">FREE TOOL</span>
	<span className="font-mono text-xs tracking-[0.15em] text-accent uppercase mb-3 block">FREE TOOL</span>

[aafre]

@gemini-code-assist Good catch — fixed in 66be5a9. This is the dark CTA card (bg-ink) identical to the LandingPage case I already handled. Restored to text-accent (#00d47e) which gives ~10:1 on the dark background.

[gemini-code-assist]

Thank you for the clarification, @aafre. That makes perfect sense. Since the bg-ink container provides sufficient contrast, reverting to text-accent is indeed the correct approach to maintain both accessibility and the intended visual design. I have no further concerns regarding this specific component.