Implement WCAG AA compliant color palette

[Copilot]

Several color combinations failed WCAG AA contrast requirements (4.5:1 normal text, 3:1 large text). Book links at 3.56:1, badges at 2.77:1, and handwritten overlay at 1.37:1 were below threshold.

Changes

Light mode

• Body text: gray-700 → gray-900
• Links: pink-600 → pink-700, orange-600 → orange-700
• Badges: red-400 → red-700
• Handwritten overlay: #1aff00 → #15803D (green-700)

Dark mode

• Background: neutral-800 → gray-800 (#1F2937 provides better contrast base)
• Body text: gray-100 → gray-50
• Links: teal-200 → teal-300, teal-500 → teal-400
• Headings: emerald-500 → emerald-400

Gradients

• Updated to stronger shades maintaining visual hierarchy: from-red-500 via-orange-600 to-pink-700

Documentation

Added COLOR_PALETTE.md with contrast ratios, usage guidelines, and validation methodology.

Impact

All text now achieves 5.02:1–17.74:1 contrast (light) and 5.48:1–14.05:1 (dark), exceeding WCAG AA minimums.

Original prompt

Implement a new high contrast color palette for the website to improve accessibility. The palette must meet WCAG AA standards for contrast, ensuring text and UI components are clearly readable for users with vision impairments.

Requirements:

• Review all areas of the site where color and contrast are critical (e.g., text, backgrounds, buttons, links, banners, and navigation).
• Replace or update the color palette to ensure a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text, in compliance with WCAG AA guidelines.
• Test all UI elements after the palette update to ensure ongoing compliance.
• Document the new color palette and any changes in a relevant markdown or style guide file.

Reference: #6

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.