[UX] Improve text contrast ratios for better readability

Summary

The current color scheme uses low-contrast text colors that reduce readability and may cause eye strain during extended reading sessions. This issue proposes updated color values that meet WCAG accessibility standards while maintaining Reedle's clean aesthetic.

Problem

Current State

• Heading text: #666666 on white (contrast ratio: ~2.9:1) ❌ Fails WCAG AA

• Body text: #777777 on white (contrast ratio: ~3.2:1) ❌ Fails WCAG AA

• List numbers: #999999 on white (contrast ratio: ~2.2:1) ❌ Fails WCAG AA

• Sidebar items: #aaaaaa on white (contrast ratio: ~1.8:1) ❌ Fails WCAG AA

Impact

1. Reduced reading speed: Low contrast forces readers to work harder to decode text

2. Eye fatigue: Extended reading sessions become uncomfortable

3. Accessibility concerns: Fails WCAG AA standards for normal text (4.5:1 minimum)

4. Attention drift: Weak visual hierarchy makes it harder to maintain focus

5. Excludes users: People with visual impairments or reading in bright environments struggle significantly

Proposed Solution

Updated Color System

/* Primary content - high contrast for optimal readability */
--text-heading: #0a0a0a;        /* 19.5:1 contrast - AAA ✓ */
--text-body: #1a1a1a;           /* 15.8:1 contrast - AAA ✓ */
--text-accent: #1e40af;         /* 8.2:1 contrast - AAA ✓ */

/* Secondary content - medium contrast for UI elements */
--text-secondary: #6b7280;      /* 4.9:1 contrast - AA ✓ */
--text-tertiary: #9ca3af;       /* 3.2:1 contrast - use sparingly */

/* Backgrounds */
--bg-primary: #fafaf9;          /* Warm white - softer than pure white */
--bg-highlight: #fef3c7;        /* Soft yellow for text highlights */
--bg-sidebar-hover: #f3f4f6;    /* Subtle hover state */

Before/After Comparison

Benefits

1. ✅ Improved readability: Stronger text contrast reduces cognitive load

2. ✅ Reduced eye strain: Comfortable for long reading sessions

3. ✅ WCAG AAA compliance: Exceeds accessibility standards for body text

4. ✅ Better visual hierarchy: Clear distinction between primary and secondary content

5. ✅ Maintains aesthetic: Still feels clean and modern, just more legible

6. ✅ Better focus: Higher contrast helps readers concentrate on content

Implementation Notes

Typography Enhancements (Optional)

To maintain the "light" aesthetic while using darker text:

• Increase line height: 1.7 → 1.8

• Adjust font weight: Consider using font-weight: 400 or 450 for body text

• Letter spacing: Add subtle letter-spacing: -0.01em for headings

Dark Mode Considerations

For night mode, invert the contrast ratios:

/* Dark mode */
--text-heading: #f5f5f5;
--text-body: #e5e5e5;
--text-accent: #60a5fa;
--bg-primary: #18181b;

Gradual Rollout

Consider A/B testing or feature flag to measure:

• Average reading session duration

• User engagement metrics

• Qualitative feedback

Related

• WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

• Contrast ratio calculator: https://webaim.org/resources/contrastchecker/

Acceptance Criteria

• [ ] Body text meets WCAG AA standard (4.5:1 minimum)

• [ ] Headings meet WCAG AAA standard (7:1 minimum)

• [ ] Sidebar text meets WCAG AA standard (4.5:1 minimum)

• [ ] Color system documented in design tokens/CSS variables

• [ ] Visual regression tests pass

• [ ] No impact on dark mode implementation

Priority: Medium-High
Type: UX Enhancement, Accessibility
Effort: Small (CSS-only changes)