fix(a11y): audit contrast, icon labels, and 44px touch targets

[AGWAM001]

Closes #156

Summary

Audits and fixes text contrast, icon-only control labeling, and interactive touch-target sizing across src/components and src/pages, so critical UI meets WCAG AA contrast requirements and controls have meaningful accessible names and adequate hit areas on mobile.

Problem

Many text colors use very low opacity, pushing effective contrast below WCAG AA thresholds against their backgrounds. Several icon-only controls (buttons/links with no visible text) have small hit areas and/or no accessible name, making them hard to use for both low-vision and screen-reader users, and hard to tap accurately on mobile.

Changes
Contrast: audited text colors relying on low opacity in src/index.css and component-level styles; adjusted opacity/color values for critical text (body copy, labels, interactive text) to meet WCAG AA contrast ratios (4.5:1 normal text, 3:1 large text) against their actual backgrounds.
Icon labels: added accessible names (aria-label, or visually-hidden text where more appropriate) to icon-only controls across src/components/src/pages that previously had none.
Touch targets: audited interactive elements against the 44×44px minimum mobile touch-target guideline; enlarged hit areas (via padding/min-width/min-height) or added equivalent spacing between adjacent controls where visual size couldn't grow without a layout regression.
Cross-runtime consistency: verified the above changes behave consistently across Express-served, Vercel-deployed, browser, and MCP contexts — no runtime-specific styling divergence introduced.
x402 settlement paths preserved: confirmed no changes touch verified x402 settlement logic/UI for paid routes; accessibility fixes in those components are purely visual/attribute-level (labels, contrast, target size), not behavioral.
Tests/docs: added/updated automated coverage (accessible-name assertions, contrast-relevant snapshot or unit tests where applicable) and updated relevant documentation for components whose markup/attributes changed.
Why this approach

Fixing contrast via opacity/color adjustments (rather than a broader theme rework) keeps the change scoped and low-risk against layout regressions. For touch targets, preferring spacing over forced size increases where a control's visual size is intentionally small (e.g. dense icon rows) avoids disrupting existing layouts while still meeting the effective-target-size guidance.

Testing
Automated accessible-name assertions added for previously-unlabeled icon controls.
Manual contrast-ratio verification (tooling: browser devtools / axe / equivalent) on updated text elements — before/after ratios recorded.
Manual touch-target audit against 44px guideline on mobile viewport, confirming no layout regressions in affected components.
Verified x402 paid-route settlement flow is unaffected — ran through the existing paid-route flow to confirm no behavioral change.
Verified consistent rendering/behavior across Express, Vercel, browser, and MCP surfaces.

[drips-wave]

@AGWAM001 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[vercel]

@AGWAM001 is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[AbuJulaybeeb]

KIndly rebase the branch

[AGWAM001]

ready for merge