feat: Add dark mode contrast audit and improvements

Description

Audit and improve dark mode color contrast ratios to meet WCAG AA standards.

Problem

• Dark mode exists but contrast ratios haven't been audited
• Some text/background combinations may not meet WCAG standards
• Code blocks in dark mode may have poor readability
• Potential accessibility issues for users with visual impairments

WCAG Requirements

• AA (minimum): Contrast ratio of 4.5:1 for normal text
• AA (large text): Contrast ratio of 3:1 for 18px+ or 14px+ bold
• AAA (enhanced): Contrast ratio of 7:1 for normal text

Areas to Audit

1. Body text on background
2. Headings on background
3. Links (hover, focus, active states)
4. Code blocks syntax highlighting
5. Quiz cards and buttons
6. Form inputs
7. Navigation menu
8. Footer

Tools for Testing

• Chrome DevTools Lighthouse
• WebAIM Contrast Checker
• axe DevTools browser extension
• Colour Contrast Analyser

Proposed Solution

1. Audit all color combinations
2. Document current contrast ratios
3. Update colors that fail WCAG AA
4. Consider adding high-contrast theme option
5. Document color palette with contrast ratios

Acceptance Criteria

• Audit all text/background combinations
• Document current contrast ratios
• Fix colors that fail WCAG AA
• Ensure all code block colors meet standards
• Test with actual users (color blindness simulators)
• Update Tailwind color config
• Add contrast ratio documentation
• Add automated contrast checks to CI

Example Improvements

/* Before: Might be 3.2:1 ratio */
--text-secondary: rgb(156 163 175);

/* After: 4.6:1 ratio */
--text-secondary: rgb(209 213 219);

Files to Modify

• app/globals.css - Update CSS custom properties
• tailwind.config.ts - Update color palette
• components/code-block.tsx - Update syntax theme
• docs/colors.md - New color documentation