fix(a11y): brand-dark text on pink accent CTAs (#96)

docs/design-system.md

@@ -100,11 +100,11 @@ Fonts are loaded via Google Fonts in `src/layouts/BaseLayout.astro` with `precon
 
 Three variants, all pill-shaped:
 
-| Variant     | Look                         | Usage                              |
-| ----------- | ---------------------------- | ---------------------------------- |
-| `primary`   | Pink background, white text  | Main CTAs ("Join", "Donate")       |
-| `secondary` | Yellow background, dark text | Secondary actions                  |
-| `outline`   | Transparent with border      | Tertiary actions, dark backgrounds |
+| Variant     | Look                             | Usage                              |
+| ----------- | -------------------------------- | ---------------------------------- |
+| `primary`   | Pink background, brand-dark text | Main CTAs ("Join", "Donate")       |
+| `secondary` | Yellow background, dark text     | Secondary actions                  |
+| `outline`   | Transparent with border          | Tertiary actions, dark backgrounds |
 
 ```astro
 <Button href="/join" variant="primary" size="lg">Join Us</Button>
@@ -146,6 +146,8 @@ Ratios measured in the Book, not estimated here.
 
 White on yellow is the one that looks acceptable on a bright laptop and is unreadable everywhere else. The homepage hero is yellow, so it uses **dark** text — that is the reason, not a stylistic preference.
 
+Primary pink (`accent-400` / brand pink) CTAs use **brand-dark** text, not white — white-on-pink fails AA for normal text (about 2.7:1). Ink-on-pink clears AA (5.4:1 in the table above). Header RSVP already follows this; the shared `Button` primary variant matches.
+
 ### Focus states
 
 The Book specifies: **pink ring (`#FF66A8`), 2px outline, 2px offset — identical across buttons, inputs and links.** Never blue. Never hover-only for navigation. The default browser focus ring is blue, which is out of system, so it gets replaced rather than suppressed.

e2e/contrast.spec.ts

@@ -11,9 +11,9 @@ import { test, expect, type Locator } from '@playwright/test';
  * that changes tokens, swaps a component, or introduces a hover state that inverts
  * the pairing gets caught, not just a literal `text-white` reappearing.
  *
- * Scope is deliberately the elements this branch redesigned. The same pairing still
- * exists on the shared Button component and on several page-level CTA sections that
- * predate this work — tracked separately rather than silently restyled here.
+ * Header / event-bar RSVP and the shared `Button` primary variant (pink on
+ * brand-dark) are both gated here. `/about` has no primary Button — the
+ * regression target is `/support` `data-testid="primary-cta"`.
  */
 
 const AA_NORMAL_TEXT = 4.5;
@@ -112,4 +112,19 @@ test.describe('primary CTA colour contrast', () => {
       `current nav label is ${ratio.toFixed(2)}:1 (${color} on ${pill}), needs ${AA_NORMAL_TEXT}:1`,
     ).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
   });
+
+  test('the shared primary Button meets WCAG AA for normal text', async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto('/support');
+
+    const cta = page.getByTestId('primary-cta');
+    await expect(cta).toBeVisible();
+
+    const { color, background } = await effectiveColours(cta);
+    const ratio = contrastRatio(color, background);
+    expect(
+      ratio,
+      `primary Button is ${ratio.toFixed(2)}:1 (${color} on ${background}), needs ${AA_NORMAL_TEXT}:1`,
+    ).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
 });

src/components/Button.astro

@@ -22,7 +22,7 @@ const baseClasses =
 
 const variantClasses = {
   primary:
-    'bg-accent-400 text-white hover:bg-accent-500 focus:ring-accent-400 shadow-md hover:shadow-lg hover:-translate-y-0.5',
+    'bg-accent-400 text-brand-dark hover:bg-accent-500 focus:ring-accent-400 shadow-md hover:shadow-lg hover:-translate-y-0.5',
   secondary:
     'bg-primary-300 text-brand-dark hover:bg-primary-400 focus:ring-primary-400 shadow-md hover:shadow-lg hover:-translate-y-0.5',
   outline:

src/pages/_blog/index.astro

@@ -87,7 +87,7 @@ const posts = (await getCollection('blog')).sort(
     </div>
   </section>
 
-  <section class="section-padding bg-accent-400 text-white">
+  <section class="section-padding bg-accent-400 text-brand-dark">
     <div class="container-custom text-center">
       <h2 class="text-4xl font-bold mb-6">Share your voice</h2>
       <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
@@ -107,7 +107,6 @@ const posts = (await getCollection('blog')).sort(
           href="/contact"
           variant="outline"
           size="lg"
-          class="!text-white !border-white hover:!bg-white/10"
         >
           Get in Touch
         </Button>

src/pages/about.astro

@@ -155,7 +155,7 @@ const programs = [
     </div>
   </section>
 
-  <section class="section-padding bg-accent-400 text-white border-t-[3px]">
+  <section class="section-padding bg-accent-400 text-brand-dark border-t-[3px]">
     <div class="container-custom text-center">
       <h2 class="text-4xl font-bold mb-6">Come build with us</h2>
       <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Show up before you feel ready.</p>
@@ -165,7 +165,6 @@ const programs = [
           href="/events"
           variant="outline"
           size="lg"
-          class="!text-white !border-white hover:!bg-white/10"
         >
           Attend an event
         </Button>

src/pages/contact.astro

@@ -248,7 +248,7 @@ import { site, links } from '../config';
 
               <button
                 type="submit"
-                class="w-full px-6 py-3 bg-accent-400 text-white font-display font-bold rounded-full hover:bg-accent-500 transition-[transform,background-color,box-shadow] duration-150 ease-out shadow-md hover:shadow-lg hover:-translate-y-0.5"
+                class="w-full px-6 py-3 bg-accent-400 text-brand-dark font-display font-bold rounded-full hover:bg-accent-500 transition-[transform,background-color,box-shadow] duration-150 ease-out shadow-md hover:shadow-lg hover:-translate-y-0.5"
               >
                 Send message
               </button>

src/pages/events.astro

@@ -194,7 +194,7 @@ const photos = (await getCollection('gallery')).sort(
   </section>
 
   <!-- CTA -->
-  <section class="section-padding bg-accent-400 text-white border-t-[3px]">
+  <section class="section-padding bg-accent-400 text-brand-dark border-t-[3px]">
     <div class="container-custom text-center">
       <h2 class="text-4xl font-bold mb-6">Ready to join us?</h2>
       <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
@@ -208,7 +208,6 @@ const photos = (await getCollection('gallery')).sort(
           href="/join"
           variant="outline"
           size="lg"
-          class="!text-white !border-white hover:!bg-white/10"
         >
           Join the Community
         </Button>

src/pages/join.astro

@@ -46,7 +46,7 @@ const secondaryRoutes = [
   title="Join PhilaCon Valley - Get involved"
   description="Show up before you feel ready. Open your first pull request, come to a Lab, or get on Discord."
 >
-  <section class="bg-accent-400 text-white py-20">
+  <section class="bg-accent-400 text-brand-dark py-20">
     <div class="container-custom">
       <div class="max-w-3xl mx-auto text-center">
         <h1 class="text-5xl md:text-6xl font-bold mb-6">Join the community</h1>

src/pages/projects/index.astro

@@ -201,7 +201,7 @@ const displayNames: Record<string, string> = {
   </section>
 
   <!-- Submit Project CTA -->
-  <section class="section-padding bg-accent-400 text-white border-t-[3px]">
+  <section class="section-padding bg-accent-400 text-brand-dark border-t-[3px]">
     <div class="container-custom text-center">
       <h2 class="text-4xl font-bold mb-6">Built something cool?</h2>
       <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
@@ -215,7 +215,6 @@ const displayNames: Record<string, string> = {
           external
           variant="outline"
           size="lg"
-          class="!text-white !border-white hover:!bg-white/10"
         >
           View on GitHub
         </Button>

src/pages/resources/index.astro

@@ -198,7 +198,7 @@ const levels = [...new Set(resources.map((r) => r.data.level))];
   }
 
   <!-- Contribute CTA -->
-  <section class="section-padding bg-accent-400 text-white">
+  <section class="section-padding bg-accent-400 text-brand-dark">
     <div class="container-custom text-center">
       <h2 class="text-4xl font-bold mb-6">Share your knowledge</h2>
       <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
@@ -211,7 +211,6 @@ const levels = [...new Set(resources.map((r) => r.data.level))];
           href="/join"
           variant="outline"
           size="lg"
-          class="!text-white !border-white hover:!bg-white/10"
         >
           Join the Community
         </Button>

src/pages/support.astro

@@ -155,7 +155,13 @@ import { links } from '../config';
               Visit our Open Collective page to make a one-time or recurring contribution. All
               transactions are transparent and publicly visible.
             </p>
-            <Button href={links.openCollective} external variant="primary" size="lg">
+            <Button
+              href={links.openCollective}
+              external
+              variant="primary"
+              size="lg"
+              data-testid="primary-cta"
+            >
               Donate on Open Collective
             </Button>
           </div>
@@ -217,7 +223,7 @@ import { links } from '../config';
   </section>
 
   <!-- CTA -->
-  <section class="section-padding bg-accent-400 text-white border-t-[3px]">
+  <section class="section-padding bg-accent-400 text-brand-dark border-t-[3px]">
     <div class="container-custom text-center">
       <h2 class="text-4xl font-bold mb-6">Ready to make an impact?</h2>
       <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
@@ -231,7 +237,6 @@ import { links } from '../config';
           href="/contact"
           variant="outline"
           size="lg"
-          class="!text-white !border-white hover:!bg-white/10"
         >
           Other ways to help
         </Button>