From 253f9905469335ac1e940af6f35eeaf2ab05549d Mon Sep 17 00:00:00 2001 From: hayep Date: Sat, 14 Mar 2026 18:37:49 +0000 Subject: [PATCH] fix: improve green accent color contrast to pass WCAG AA Change default accent color from #16a34a (green-600, 3.14:1 ratio) to #15803d (green-700, 4.79:1 ratio) to meet WCAG 2 AA minimum contrast threshold of 4.5:1 with white foreground text. Fixes E2E accessibility test failures on: - Public donation page (Donate Now button) - Campaign invite email template (button and border) Also adds devcontainer environment info to AGENTS.md. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- AGENTS.md | 9 +++++++++ src/components/campaigns/PublicCampaignPage.tsx | 4 +++- src/lib/email/templates/campaign-invite-email.tsx | 4 ++-- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index b167ab1..b344c33 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -60,6 +60,15 @@ Before implementing new features, check: --- +## Development Environment + +This project runs in a **devcontainer** with the following services always available: + +- **PostgreSQL** is available at `localhost:5432`. The `DATABASE_URL` environment variable is pre-set (e.g., `postgresql://transparency:devpassword@localhost:5432/transparency_dev`). Do not attempt to install or start PostgreSQL — it is already running. +- **Playwright Chromium** must be installed before running E2E tests: `npx playwright install chromium` + +--- + ## When in Doubt 1. Search the codebase for similar patterns diff --git a/src/components/campaigns/PublicCampaignPage.tsx b/src/components/campaigns/PublicCampaignPage.tsx index 768d559..16d063c 100644 --- a/src/components/campaigns/PublicCampaignPage.tsx +++ b/src/components/campaigns/PublicCampaignPage.tsx @@ -68,7 +68,9 @@ export function PublicCampaignPage({ ? `${window.location.origin}/org/${organizationSlug}/donate/${campaign.id}` : `/org/${organizationSlug}/donate/${campaign.id}`; - const accentColor = primaryColor || '#16a34a'; + // Default green-700 (#15803d) passes WCAG AA contrast (4.79:1) with white text; + // green-600 (#16a34a) only achieves 3.14:1 which fails the 4.5:1 threshold. + const accentColor = primaryColor || '#15803d'; return (
diff --git a/src/lib/email/templates/campaign-invite-email.tsx b/src/lib/email/templates/campaign-invite-email.tsx index 94caf38..d9e511e 100644 --- a/src/lib/email/templates/campaign-invite-email.tsx +++ b/src/lib/email/templates/campaign-invite-email.tsx @@ -146,7 +146,7 @@ const campaignCard = { borderRadius: '8px', padding: '16px 20px', margin: '0 0 16px', - borderLeft: '4px solid #16a34a', + borderLeft: '4px solid #15803d', }; const campaignTitle = { @@ -191,7 +191,7 @@ const buttonContainer = { }; const button = { - backgroundColor: '#16a34a', + backgroundColor: '#15803d', borderRadius: '6px', color: '#ffffff', fontSize: '15px',