Accesibilidad y Preferencias del Usuario

Estados de Foco Visibles

Los usuarios de teclado dependen de los contornos de foco. Usa :focus-visible para mostrar el foco solo cuando importa.

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

Contraste de Color

El texto debe cumplir las pautas de contraste para legibilidad. Apunta a al menos 4.5:1 para texto del cuerpo.

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

Respetar Preferencias del Usuario

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

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

Alto Contraste y Colores Forzados

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