Skip to content

fix(web): raise accessibility floor on text contrast and label sizes (#60) - #67

Open
mimionly wants to merge 1 commit into
Developer-Kommunity-24:mainfrom
mimionly:fix/contrast
Open

mimionly wants to merge 1 commit into
Developer-Kommunity-24:mainfrom
mimionly:fix/contrast

Conversation

@mimionly

Copy link
Copy Markdown

Closes #60

Summary

This PR raises the mechanical accessibility floor for text contrast and minimum label sizes across dark surfaces in the web client, aligning with WCAG AA contrast and comfortable reading size guidelines.

Changes Made

  1. Raised Opacity Floor to ~60%:

    • Updated secondary copy and section labels (e.g., "Powered By", "In Collaboration with", "Live Updates", "About this Startup") from opacity-30 / opacity-40 / text-white/30 to opacity-60 / text-white/60.
    • Raised disabled rating button copy contrast from text-white/30 to text-white/60.
    • Improved visibility of locked item slots and the lock indicator icon in the Item Directory (opacity-60 and text-white/60).
  2. Raised Minimum Label Size Floor to 12px:

    • Replaced all sub-12px sizes (text-[10px], text-[11px]) with Tailwind's standard text-xs (12px / 0.75rem) across labels, badges, warnings, and footer sections.
  3. Card Contrast Fix:

    • Adjusted "Rating Success" subtitle on the completion card from text-slate-400 to text-slate-600 for WCAG AA compliance against light card backgrounds.

Affected Components

  • CompletionScreen.tsx
  • Footer.tsx
  • ProgressScreen.tsx
  • RatingScreen.tsx

Verification

  • Tested builds locally via tsc -b && vite build (passes cleanly).
  • Verified responsive layout integrity on mobile and desktop viewports.

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.

Raise the accessibility floor on text contrast and label sizes

1 participant