Adapta la barra de desplazamiento a las preferencias de contraste alto

Los usuarios que habilitan los modos de alto contraste en su sistema operativo o navegador esperan que los elementos de la IU (como las barras de desplazamiento) sean extremadamente legibles, por lo que suelen depender de una separación clara entre el primer plano y el fondo, en lugar de grises sutiles o colores del tema.

En esta guía, se proporcionan instrucciones opcionales para usar la función de medios de CSS @media (prefers-contrast: more) para aplicar un diseño de barra de desplazamiento de alto contraste.

Mejora la legibilidad

Cuando personalizas las barras de desplazamiento con scrollbar-color o variables personalizadas, puedes proporcionar una anulación explícita para los modos de contraste alto. Esto es especialmente útil si el tema principal de tu aplicación usa barras de desplazamiento de bajo contraste por motivos estéticos.

OPCIONAL: Usa un bloque @media (prefers-contrast: more) para definir colores oscuros y distintos para el control deslizante y la pista.

/* Define default standard colors as variables */
.scroller {
  --scrollbar-thumb: #bbb;
  --scrollbar-track: #f1f1f1;

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* OPTIONAL: Provide clear, high-contrast overrides */
@media (prefers-contrast: more) {
  .scroller {
    /* Use extremely distinct colors like solid black against white */
    --scrollbar-thumb: #000000;
    --scrollbar-track: #ffffff;
  }
}

Problemas que debes tener en cuenta cuando usas scrollbar-color

• NO animes ni hagas transiciones de scrollbar-color. Un error de WebKit hace que la barra de desplazamiento parpadee cada vez que cambia scrollbar-color.
• En macOS, las propiedades scrollbar-color (estándar) y ::-webkit-scrollbar (heredada) se ignoran de forma predeterminada porque macOS usa barras de desplazamiento nativas de "superposición". DEBES vincular los colores personalizados con scrollbar-width (p.ej., thin o auto) para forzar a macOS a renderizarlos.
• Incluso con scrollbar-width aplicado, las barras de desplazamiento superpuestas de macOS renderizan la pista (canaleta) como transparente de forma predeterminada. Si el diseño requiere un color de fondo de pista visible en macOS, DEBES aplicar scrollbar-gutter: stable; al contenedor desplazable, pero ten en cuenta que solo aparece después de que el usuario coloca el cursor sobre la barra de desplazamiento.
• Incluso con scrollbar-gutter: stable, es posible que la pista sea transparente en macOS. El control deslizante no debe depender del color de la pista para ser visible.

Resguardos y compatibilidad con navegadores

Resguardos y compatibilidad de navegadores con scrollbar-color

Esta función es una mejora progresiva y no siempre requiere resguardos.

Si el diseño es importante y el objetivo de Baseline del usuario es "Baseline Widely Available" o anterior, DEBERÍAS incluir los seudoelementos ::-webkit-scrollbar no estándar como resguardos.

Une los resguardos heredados en un bloque @supports not (scrollbar-color: auto) para evitar conflictos entre las propiedades estándar y los selectores de WebKit heredados en los navegadores que admiten ambos de forma nativa.

Si usas propiedades personalizadas para definir colores, estos se aplicarán en cascada a los selectores de WebKit heredados automáticamente. NO es necesario que los dupliques.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}