fix(a11y): improve purple contrast for WCAG AAA compliance (#96)

## Summary

- Implements WCAG AAA contrast compliance (7:1+ ratio) for purple accent
colors
- Creates centralized accent utility classes using CSS `light-dark()`
function for automatic theme switching
- Reduces maintenance burden by centralizing all accent color management
to CSS variables

## Changes

### CSS Variables (`src/styles/globals.css`)
- Updated `--accent-light` from `rgb(126 34 206)` (purple-700, 6.63:1)
to `rgb(107 33 168)` (purple-800, 7:1+)
- Added `--accent-hover-light`, `--accent-hover-dark`, `--accent-focus`
variables
- Added `--accent-hover-color` using `light-dark()` for automatic theme
switching

### New Accent Utility Classes
- `.text-accent` - Text color with automatic light/dark switching
- `.bg-accent` - Background color with automatic switching
- `.bg-accent-hover:hover` - Hover state background
- `.border-accent` / `.border-accent-focus:focus` - Border utilities
- `.ring-accent-focus:focus` - Focus ring integration with Tailwind
- `.btn-accent` - Combined button utility with text color handling for
both themes

### Component Updates
- `ContactEmailForm.tsx` - Replaced `text-purple-700
dark:text-purple-400` with `text-accent`
- `ContactEmailForm.tsx` - Updated button to use `btn-accent
bg-accent-hover` utilities
- `ContactForm.tsx` - Same pattern applied

### ROADMAP Updates
- Marked #64 (WCAG AAA Contrast) as completed
- Marked #65 (Font Size Readability) as completed
- Updated issue counts and changelog

## Benefits

- **Centralized color management** - Future contrast changes require
only CSS variable updates
- **Automatic theme switching** - Uses CSS `light-dark()` function, no
JavaScript needed
- **Reduced class verbosity** - Single class instead of `text-purple-800
dark:text-purple-400`
- **WCAG AAA compliant** - 7:1+ contrast ratio for all purple accent
elements

## Test Plan

- [x] Build passes (`npm run build`)
- [x] Lint passes (`npm run lint:check`)
- [ ] Visual verification of purple accent colors in light mode
- [ ] Visual verification of purple accent colors in dark mode
- [ ] Verify contrast ratio meets 7:1 threshold

Closes #64

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: taearls

src/components/ContactEmailForm.tsx

@@ -227,7 +227,7 @@ const ContactEmailForm = () => {
             className="mb-1 block font-bold text-gray-800 dark:text-gray-200"
             htmlFor="contactName"
           >
-            Name <span className="text-purple-700 dark:text-purple-400">*</span>
+            Name <span className="text-accent">*</span>
           </label>
           <input
             id="contactName"
@@ -248,8 +248,7 @@ const ContactEmailForm = () => {
             className="mb-1 block font-bold text-gray-800 dark:text-gray-200"
             htmlFor="contactEmail"
           >
-            Email{" "}
-            <span className="text-purple-700 dark:text-purple-400">*</span>
+            Email <span className="text-accent">*</span>
           </label>
           <input
             id="contactEmail"
@@ -300,8 +299,7 @@ const ContactEmailForm = () => {
             className="mb-1 block font-bold text-gray-800 dark:text-gray-200"
             htmlFor="contactMessage"
           >
-            Message{" "}
-            <span className="text-purple-700 dark:text-purple-400">*</span>
+            Message <span className="text-accent">*</span>
           </label>
           <textarea
             id="contactMessage"
@@ -337,7 +335,7 @@ const ContactEmailForm = () => {
           <button
             type="submit"
             disabled={!isFormValid || isSubmitting}
-            className="flex cursor-pointer items-center gap-2 rounded-lg bg-purple-700 px-6 py-2 text-white transition-all duration-200 ease-in-out hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-purple-400 dark:text-gray-900 dark:hover:bg-purple-300 dark:focus:ring-offset-gray-900"
+            className="btn-accent bg-accent-hover ring-accent-focus flex cursor-pointer items-center gap-2 rounded-lg px-6 py-2 transition-all duration-200 ease-in-out focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-gray-900"
           >
             {isSubmitting && (
               <svg

src/components/ContactForm/ContactForm.tsx

@@ -468,7 +468,7 @@ export default function ContactForm() {
 
         <div className="flex flex-col">
           <label
-            className="mb-1 block pr-4 font-bold text-purple-700 md:mb-0 dark:text-purple-400"
+            className="text-accent mb-1 block pr-4 font-bold md:mb-0"
             htmlFor="contactEmail"
           >
             {"Email"}
@@ -527,7 +527,7 @@ export default function ContactForm() {
               type="submit"
               value="Send Email"
               disabled={isFormDisabled()}
-              className="transition-padding focus:shadow-outline-light dark:focus:shadow-outline-dark my-2 inline-block cursor-pointer rounded-lg bg-purple-700 pr-10 pl-2 text-white transition-colors duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed disabled:pr-2 disabled:opacity-50 dark:bg-purple-400"
+              className="btn-accent bg-accent-hover transition-padding focus:shadow-outline-light dark:focus:shadow-outline-dark my-2 inline-block cursor-pointer rounded-lg pr-10 pl-2 transition-colors duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed disabled:pr-2 disabled:opacity-50"
             />
           </div>
         </div>

src/styles/globals.css

@@ -49,6 +49,13 @@
   --color-gray-700: #3f3f46;
   --color-gray-800: #27272a;
   --color-gray-900: #18181b;
+  /* Purple colors - custom for WCAG AAA compliance (7:1+ contrast) */
+  --color-purple-300: #d8b4fe; /* lighter purple for dark mode hover */
+  --color-purple-400: #c084fc; /* dark mode primary (unchanged) */
+  --color-purple-500: #a855f7; /* focus ring color (unchanged) */
+  --color-purple-600: #9333ea; /* standard purple for hover */
+  --color-purple-700: #7e22ce; /* original light mode primary */
+  --color-purple-800: #6b21a8; /* WCAG AAA compliant light mode primary */
 
   /* Custom font families */
   --font-family-default: Asul, sans-sarif;
@@ -91,9 +98,22 @@
   ); /* darker cyan for WCAG AA compliance (3:1+ contrast) */
   --active-dark: rgb(103 232 249 / 1); /* tailwind cyan-300 */
   --accent-dark: rgb(192 132 252 / 1); /* tailwind purple-400 */
-  --accent-light: rgb(126 34 206 / 1); /* tailwind purple-700 */
+  --accent-light: rgb(
+    107 33 168 / 1
+  ); /* tailwind purple-800 - WCAG AAA compliant (7:1+) */
+  --accent-hover-light: rgb(
+    126 34 206 / 1
+  ); /* tailwind purple-700 - lighter for hover */
+  --accent-hover-dark: rgb(
+    216 180 254 / 1
+  ); /* tailwind purple-300 - lighter for hover */
+  --accent-focus: rgb(168 85 247 / 1); /* tailwind purple-500 - focus rings */
   --active-color: light-dark(var(--active-light), var(--active-dark));
   --accent-color: light-dark(var(--accent-light), var(--accent-dark));
+  --accent-hover-color: light-dark(
+    var(--accent-hover-light),
+    var(--accent-hover-dark)
+  );
   --text-color: light-dark(var(--text-light), var(--text-dark));
   --font-default: "Ubuntu", sans-serif;
   /* --font-emphasis:
@@ -175,3 +195,66 @@ img {
   /* Use containment to isolate layout calculations */
   contain: layout;
 }
+
+/* =============================================================================
+   Accent Color Utility Classes
+   Uses light-dark() for automatic theme switching - WCAG AAA compliant (7:1+)
+   Update CSS variables above to change colors globally across all components.
+   ============================================================================= */
+
+/* Text color */
+.text-accent {
+  color: var(--accent-color);
+}
+
+/* Background colors */
+.bg-accent {
+  background-color: var(--accent-color);
+}
+
+.bg-accent-hover:hover {
+  background-color: var(--accent-hover-color);
+}
+
+/* Border colors */
+.border-accent {
+  border-color: var(--accent-color);
+}
+
+.border-accent-focus:focus {
+  border-color: var(--accent-focus);
+}
+
+/* Focus ring utilities - integrates with Tailwind's ring system */
+.ring-accent-focus:focus {
+  --tw-ring-color: var(--accent-focus);
+}
+
+/* Combined button utility for common accent button pattern */
+.btn-accent {
+  background-color: var(--accent-color);
+  color: white;
+}
+
+.btn-accent:hover {
+  background-color: var(--accent-hover-color);
+}
+
+.btn-accent:focus {
+  --tw-ring-color: var(--accent-focus);
+}
+
+/* Dark mode button text override (purple-400 needs dark text for contrast) */
+@media (prefers-color-scheme: dark) {
+  .btn-accent {
+    color: #111827; /* gray-900 for contrast on light purple */
+  }
+}
+
+html.dark-theme .btn-accent {
+  color: #111827;
+}
+
+html.light-theme .btn-accent {
+  color: white;
+}