Accessible CSS

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

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.