Adaptar a barra de rolagem às preferências de alto contraste

Os usuários que ativam os modos de alto contraste no sistema operacional ou no navegador esperam que os elementos da interface (como barras de rolagem) sejam extremamente legíveis, geralmente dependendo de uma separação nítida entre o primeiro plano e o plano de fundo, em vez de cinzas sutis ou cores do tema.

Este guia fornece instruções opcionais sobre como usar o recurso de mídia CSS @media (prefers-contrast: more) para aplicar o estilo de barra de rolagem de alto contraste.

Ajustar a legibilidade

Ao personalizar barras de rolagem com scrollbar-color ou variáveis personalizadas, é possível fornecer uma substituição explícita para os modos de alto contraste. Isso é útil principalmente se o tema principal do aplicativo usa barras de rolagem de baixo contraste por motivos estéticos.

OPCIONAL: use um bloco @media (prefers-contrast: more) para definir cores escuras e distintas para o controle deslizante e a barra.

/* 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 podem ocorrer ao usar scrollbar-color

• NÃO anime nem faça transições de scrollbar-color. Um bug do WebKit (link em inglês) faz com que a barra de rolagem pisque sempre que scrollbar-color muda.
• No macOS, as propriedades scrollbar-color (padrão) e ::-webkit-scrollbar (legado) são ignoradas por padrão porque o macOS usa barras de rolagem de "sobreposição" nativas. Você PRECISA combinar cores personalizadas com scrollbar-width (por exemplo, thin ou auto) para forçar o macOS a renderizá-las.
• Mesmo com scrollbar-width aplicado, as barras de rolagem de sobreposição do macOS renderizam a faixa (calha) como transparente por padrão. Se o design exigir uma cor de fundo visível para a barra de rolagem no MacOS, você PRECISA aplicar scrollbar-gutter: stable; ao contêiner rolável, mas observe que ela só aparece depois que o usuário passa o cursor sobre a barra de rolagem.
• Mesmo com scrollbar-gutter: stable, a faixa pode ser transparente no MacOS. O polegar não deve depender da cor da faixa para ficar visível.

Alternativas e suporte ao navegador

Alternativas e suporte do navegador para scrollbar-color

Esse recurso é um aprimoramento progressivo e nem sempre requer substitutos.

Se o estilo for importante e o destino do usuário for "Baseline Widely Available" ou anterior, inclua os pseudoelementos ::-webkit-scrollbar não padrão como substitutos.

Envolva os substitutos legados em um bloco @supports not (scrollbar-color: auto) para evitar conflitos entre propriedades padrão e seletores WebKit legados em navegadores que oferecem suporte nativo a ambos.

Se você estiver usando propriedades personalizadas para definir cores, elas serão aplicadas automaticamente aos seletores legados do WebKit. NÃO é necessário duplicá-los.

/* 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);
  }
}