CTA Component Visual Regression Test
This page displays all CTA components across all background types to ensure proper visibility, contrast, and styling in both light and dark modes. Use this for visual inspection and automated testing.
⚠️ Test Page - Not for Production
Toggle light/dark mode in top-right to test both themes
Light Background (Default Pages)
Background Type: light
Primary CTAs (High Emphasis)
Secondary CTAs (Lower Emphasis)
Light Gradient (Hero Sections)
Background Type: gradient-light
Primary CTAs (High Emphasis)
Secondary CTAs (Lower Emphasis)
Purple Gradient (CTA Sections)
Background Type: gradient-purple
Primary CTAs (High Emphasis)
Secondary CTAs (Lower Emphasis)
Dark Background
Background Type: dark
Primary CTAs (High Emphasis)
Secondary CTAs (Lower Emphasis)
Accent Background
Background Type: accent
Primary CTAs (High Emphasis)
Secondary CTAs (Lower Emphasis)
Button Variant Strategy Reference
| Background Type | Primary Variant | Secondary Variant | Reasoning |
|---|---|---|---|
light | default | outline | Purple bg stands out on light background |
gradient-light | default | outline | Same as light - subtle gradient |
gradient-purple | modern | glass | White/glass contrasts with purple bg |
dark | modern | glass | White/glass contrasts with dark bg |
accent | modern | glass | White/glass contrasts with accent bg |
✅ WCAG Accessibility Compliance
All button/background combinations maintain a minimum 4.5:1 contrast ratio for WCAG AA compliance. The automated Playwright test will verify this programmatically.