feat(a11y): add high-contrast + color-vision-friendly themes (CVD)

[thc1006]

Dear paviro, Thank you for building this wonderful Relationship Menu platform, it’s super helpful.
and I have some UI/UX idea hope discuss with u, sorry my english is suck below is GPT help me generate hope you can understand.

Description

Relationship Menu currently supports light/dark mode (great!), but there is no accessibility control for:

• Increasing contrast (for low-vision users)
• Color-vision-friendly themes (e.g., protanopia/deuteranopia/tritanopia)
• Ensuring UI states/information are not conveyed by color alone

This can make it harder for users with low vision or color vision deficiency (CVD) to reliably distinguish selected/active states, emphasis, and key UI cues.

Reference example: GitHub provides colorblind themes and an “Increase contrast” option in Appearance settings:

• https://github.com/settings/appearance

Steps to Reproduce

1. Open https://relationshipmenu.org/
2. Navigate through the UI (and any existing settings)
3. Observe there is no way to:
   • Toggle higher contrast
   • Switch to a CVD-friendly theme
   • Adjust UI indicators that rely on color only

Expected Behavior

Provide an Accessibility section (or equivalent) allowing users to:

• Toggle “Increase contrast” (high-contrast mode)
• Select a CVD-friendly theme (e.g., protanopia/deuteranopia/tritanopia)
• Ensure UI states are distinguishable without relying only on color (e.g., add icons, patterns, underline/bold, text labels)

Bonus (nice-to-have):

• Respect OS/browser preferences via CSS media queries (e.g., prefers-contrast, forced-colors)
• Persist user selection (localStorage / user profile)

Actual Behavior

• Only light/dark mode is available
• No contrast toggle or CVD-friendly theme options
• Some UI cues appear to rely primarily on color differences

Environment

• OS: (e.g., Windows 11 / macOS 14 / Ubuntu 22.04)
• Browser: (e.g., Chrome 120 / Safari 17 / Firefox 121)
• Accessibility settings: (e.g., Windows High Contrast ON / system increased contrast / color filters)

Additional Information

Proposed Implementation (suggestion)

• Introduce design tokens via CSS variables (e.g., --bg, --fg, --accent, --border, --focus-ring)
• Add theme presets:
  • default light/dark
  • high-contrast light/dark
  • CVD-friendly variants (at least protanopia/deuteranopia + tritanopia)
• Add non-color cues for states:
  • selected = icon + border style + text (not just hue)
  • focus ring clearly visible
• Consider supporting:
  • prefers-contrast: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
  • forced-colors: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

Acceptance Criteria (checklist)

• Text contrast meets WCAG (e.g., 4.5:1 for normal text)
• UI components / graphical indicators meet non-text contrast guidance (e.g., 3:1 against adjacent colors)
• Information and states are not communicated by color alone
• Keyboard focus states remain clear in all modes
• User preference persists across reloads