CSS Accessibility (a11y)
Build accessible interfaces with CSS — color contrast, focus management, motion preferences, screen reader considerations, and WCAG compliance.
55 min•By Priygop Team•Last updated: Feb 2026
Accessible CSS Practices
- Color Contrast: WCAG requires 4.5:1 ratio for normal text, 3:1 for large text. Use tools like WebAIM Contrast Checker. Never rely on color alone to convey meaning
- Focus Styles: Never remove :focus outlines without replacement — :focus-visible shows focus ring only for keyboard users, not mouse clicks. Customize with box-shadow or outline
- Prefers-Reduced-Motion: @media (prefers-reduced-motion: reduce) { * { animation: none !important; } } — respect users who experience motion sickness or vestibular disorders
- Prefers-Color-Scheme: @media (prefers-color-scheme: dark) { ... } — automatically match user's OS theme preference. Combine with CSS custom properties for complete theming
- Screen Reader Considerations: .sr-only class (visually hidden but screen-reader accessible). Don't use display: none for content screen readers should read
- Forced Colors Mode: @media (forced-colors: active) { ... } — Windows High Contrast mode. Ensure your UI works when the OS overrides colors for accessibility
- Touch Targets: Minimum 44×44px touch targets (WCAG 2.5.5). Use padding to increase target size without changing visual design. Critical for mobile accessibility