Skip to content

fix: light theme WCAG AA color contrast#81

Merged
justinjdev merged 1 commit intomainfrom
fix/light-theme-a11y
Mar 21, 2026
Merged

fix: light theme WCAG AA color contrast#81
justinjdev merged 1 commit intomainfrom
fix/light-theme-a11y

Conversation

@justinjdev
Copy link
Copy Markdown
Owner

@justinjdev justinjdev commented Mar 21, 2026

Summary

  • Darken light theme accent, scout, and monitor colors to meet WCAG AA contrast ratios (4.5:1 minimum for normal text)
  • All three pairs were previously below 4.5:1; now all pass
Color Before After Contrast
accent #8b6914 (4.1:1) #7a5a0e (5.1:1) Pass
scout #4a8a9e (3.3:1) #377080 (4.7:1) Pass
monitor #7b6ea4 (3.4:1) #635599 (4.8:1) Pass

Dark theme was already compliant — no changes needed.

Test plan

  • Verify light theme text is readable on all pages
  • Verify scout/monitor colors on how-it-works page are legible
  • Verify link hover states still look distinct

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Style
    • Updated light theme color palette for improved visual consistency and accessibility, including changes to accent colors, link hover states, focus indicators, and category-specific colors.

- Darken accent from #8b6914 to #7a5a0e (4.1:1 → 5.1:1)
- Darken scout from #4a8a9e to #377080 (3.3:1 → 4.7:1)
- Darken monitor from #7b6ea4 to #635599 (3.4:1 → 4.8:1)
- Update hover/focus colors to match new accent

All light theme text/background pairs now pass WCAG AA (4.5:1+).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 21, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 93212153-cec0-4795-9a45-508d459b251e

📥 Commits

Reviewing files that changed from the base of the PR and between 18e1e62 and a27e3a7.

📒 Files selected for processing (1)
  • site/src/lib/styles/theme.css

📝 Walkthrough

Walkthrough

Updated light theme color palette in the CSS theme file by changing six CSS color variables to new hex values. The accent, hover, focus, scout, and monitor color variables were modified without adding new features or altering functionality.

Changes

Cohort / File(s) Summary
Light Theme Colors
site/src/lib/styles/theme.css
Updated six CSS color variables in the light theme: --color-accent, --color-accent-hover, --color-link-hover, --color-focus, --color-scout, and --color-monitor to new hex values.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/light-theme-a11y

Comment @coderabbitai help to get the list of available commands and usage tips.

@justinjdev justinjdev merged commit 81b05fc into main Mar 21, 2026
1 of 2 checks passed
@justinjdev justinjdev deleted the fix/light-theme-a11y branch March 21, 2026 03:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant