Accessible CSS

Support zoom, focus, contrast, forced colors, motion preferences, and readable reflow.

更新于 2026年8月13日适用于 Modern CSS and WCAG-oriented browser behavior

CSS can preserve or destroy access. A resilient interface remains understandable with keyboard focus, zoom, custom colors, reduced motion, and large text.

Preferences and system colors

accessibility.css

01@media (prefers-reduced-motion: reduce) {
02  *, *::before, *::after { animation-duration: 0.01ms; scroll-behavior: auto; }
03}
04@media (forced-colors: active) {
05  .button { border: 1px solid ButtonText; forced-color-adjust: auto; }
06}
07:focus-visible { outline: 3px solid #f46537; outline-offset: 3px; }

System colors adapt to forced-color themes. Avoid globally disabling forced-color adjustment.

Reflow and visibility

Use relative type and flexible containers.
Allow text to wrap and controls to grow.
Never hide essential content only because it does not fit.
Keep focus styles outside clipped regions.
Pair color with text, shape, or an icon.
Test 200% zoom and narrow reflow without horizontal page scrolling.

Keep this

Honor preferences, preserve focus and contrast, support reflow, and test CSS with accessibility settings—not only the default browser view.