Accessibility and User Preferences

Visible Focus States

Keyboard users rely on focus outlines. Use :focus-visible to show focus only when it matters.

button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Color Contrast

Text should meet contrast guidelines for readability. Aim for at least 4.5:1 for body text.

.text {
  color: #111827;
  background: #ffffff;
}

Respect User Preferences

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #f8fafc; }
}

High Contrast & Forced Colors

Windows High Contrast mode can override your colors:

@media (forced-colors: active) {
  .button {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

Let the Browser Style Form Controls

The color-scheme property lets the browser render built-in UI (inputs, scrollbars) correctly for light/dark.

:root {
  color-scheme: light dark;
}