← Tutti gli articoli

Guide

Barre di scorrimento personalizzate e modalità ad alto contrasto con il CSS

17 maggio 2026 · di JustZix Team

I tocchi finali di un tema personalizzato sono le parti che si dimenticano: la barra di scorrimento, il contrasto, l'opzione di togliere del tutto il colore. Questa guida raccoglie le regole CSS JustZix che rifiniscono un sito in qualcosa che ti piace davvero usare.

Personalizza la barra di scorrimento

Una barra di scorrimento predefinita può stridere con un tema scuro messo a punto con cura. I browser moderni ti danno due modi per ridisegnarla. Usali entrambi per una copertura completa.

html {
  scrollbar-width: thin;
  scrollbar-color: #4b5263 #1f232a;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #1f232a;
}
::-webkit-scrollbar-thumb {
  background: #4b5263;
  border-radius: 8px;
  border: 3px solid #1f232a;
}
::-webkit-scrollbar-thumb:hover {
  background: #5c6370;
}

Le proprietà scrollbar-width e scrollbar-color coprono Firefox; gli pseudo-elementi ::-webkit-scrollbar coprono Chrome, Edge e Opera. Includere entrambi significa che la tua regola appare corretta in ogni browser supportato da JustZix.

Una vera modalità ad alto contrasto

Per chi ha ipovisione, o semplicemente per leggere in una stanza luminosa, il contrasto puro aiuta. Questa ricetta forza sfondi quasi neri, testo quasi bianco e un accento deciso.

html, body {
  background: #000 !important;
  color: #fff !important;
}
p, li, span, div, h1, h2, h3, h4, td, th {
  color: #fff !important;
}
a, a:visited {
  color: #ffe066 !important;
  text-decoration: underline !important;
}
button, .btn {
  background: #ffe066 !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

Il giallo su nero è uno degli abbinamenti a più alto contrasto disponibili ed è un valore predefinito di accessibilità di lunga data. Sottolineare i link garantisce che siano distinguibili senza affidarsi al colore.

Aumenta il contrasto senza ricolorare

Se ti piace la palette del sito ma sembra slavata, spingi il contrasto con un filtro invece di ridipingere tutto.

html {
  filter: contrast(1.15) brightness(0.97);
}

È una singola riga ed è reversibile — disattiva la regola JustZix e la pagina torna normale. Mantieni i valori delicati; qualsiasi cosa sopra 1,3 inizia a schiacciare il dettaglio.

Modalità in scala di grigi e a colori ridotti

Il colore può distrarre. Una regola in scala di grigi lo elimina del tutto, il che è ottimo per la concentrazione o per rivedere il layout senza un pregiudizio cromatico.

html {
  filter: grayscale(1);
}

Preferisci tenere le immagini a colori ma attenuare l'interfaccia? Applica la scala di grigi a tutto, poi ripristina i media.

html {
  filter: grayscale(0.85);
}
img, video, picture, canvas {
  filter: grayscale(0);
}

Rispetta le preferenze di movimento

Un tema di accessibilità completo calma anche l'animazione. Questa regola elimina il movimento che distrae per chiunque abbia chiesto al proprio sistema di ridurlo.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

Mettere tutto insieme

• Abbina sempre le proprietà della barra di scorrimento Webkit e Firefox così la regola è cross-browser.
• Il contrasto basato su filtri e la scala di grigi sono regole di una riga e completamente reversibili — ideali per un'attivazione rapida.
• Per un'accessibilità seria, ridipingi con colori reali anziché con filtri; sottolinea i link.
• Salva ogni modalità come regola JustZix a sé e attiva quella che si adatta al momento.

Questo si abbina naturalmente con una modalità scura universale e con le impostazioni per una lettura confortevole. Trova altre ricette pronte nei nostri esempi pronti all'uso, oppure scarica JustZix e inizia a personalizzare il web a modo tuo.