Responsive Breakpoint Contrast Testing
This text has GOOD contrast on mobile (320px), BAD contrast on tablet (768px), and GOOD contrast on desktop (1024px).
This demonstrates how responsive design can introduce accessibility issues at specific breakpoints.
Mobile-only text with poor contrast (visible only at 320px)
Tablet-only text with poor contrast (visible only at 768px)
Desktop-only text with poor contrast (visible only at 1024px+)
Why This Matters
This fixture demonstrates the importance of testing at multiple responsive breakpoints:
- Mobile (320px): Tests show 1 violation (mobile-only element) + 0 from responsive-text = 1 violation
- Tablet (768px): Tests show 1 violation (responsive-text changes to bad contrast) + 1 (tablet-only element) = 2 violations
- Desktop (1024px): Tests show 0 violations from responsive-text (good contrast) + 1 (desktop-only element) = 1 violation
- Total Expected: 1 + 2 + 1 = 4 violations across all breakpoints