Il sito diventa illeggibile in modalità scura: come verificare colori, loghi e moduli

Capire quale impostazione sta cambiando la pagina

Chiedi una schermata e annota dispositivo, browser, pagina e impostazioni attive. Il sito potrebbe offrire un proprio selettore, seguire la preferenza del sistema oppure essere trasformato da un’estensione. Sono situazioni diverse: una regola prevista per il tema del sito può non spiegare ciò che fa un componente esterno.

Riproduci la pagina prima con le impostazioni ordinarie e poi con la configurazione segnalata. La modalità scura non coincide con la modalità a colori forzati, che risponde ad altre esigenze di leggibilità e usa combinazioni scelte dal sistema. La documentazione MDN sui colori forzati chiarisce questa distinzione. Conserva il nome esatto dell’opzione invece di scrivere soltanto “schermo nero”. Se non riesci a riprodurre il problema, raccogli il dettaglio mancante prima di modificare l’intero tema.

Decidere quali temi il sito supporta davvero

Un sito può avere un unico aspetto progettato oppure offrire versioni chiara e scura. In entrambi i casi, la scelta deve essere coerente con ciò che viene dichiarato al browser. La regola prefers-color-scheme permette di rilevare la preferenza dell’utente e applicare gli stili previsti; non progetta automaticamente una combinazione leggibile per ogni componente.

La proprietà color-scheme comunica invece quali schemi sono adatti agli elementi e influisce anche sull’aspetto di controlli forniti dal browser. Le due impostazioni vanno coordinate. Per esempio, dichiarare il supporto al tema scuro senza verificare colori di testo, sfondi e campi può produrre un’interfaccia incoerente. Fai definire al tecnico quale comportamento è previsto, includendo un’eventuale scelta manuale del visitatore.

Controllare componenti e stati che la homepage non mostra

Seleziona una pagina servizio, una scheda prodotto o camera, il contatto e gli eventuali passaggi di prenotazione. Visita ogni pagina nei temi supportati. Apri il menu, espandi un dettaglio e seleziona una voce: i problemi spesso si trovano nei componenti che non compaiono nella prima schermata.

Registra il difetto indicando elemento e stato. “Il testo dell’errore non si legge dopo l’invio” è una consegna più utile di “migliorare i colori”. Mantieni nella lista anche una pagina con una fotografia molto chiara e una con un’immagine scura.

Misurare le combinazioni di colore realmente usate

Non limitarti a invertire bianco e nero. Il colore adatto a un collegamento su una superficie chiara può risultare debole su una scura, mentre bordi sottili e testi secondari possono quasi scomparire. Chiedi una verifica delle coppie effettive di testo e sfondo, includendo le superfici semitrasparenti e le immagini che stanno sotto.

Il riferimento W3C sul contrasto del testo indica, al livello AA, almeno 4,5:1 per il testo ordinario e 3:1 per il testo grande secondo le relative definizioni ed eccezioni. Non è un criterio unico per tutti gli elementi dell’interfaccia. Conserva per ogni difetto la combinazione iniziale e quella corretta. Il risultato deve rendere leggibili anche prezzi, disponibilità, note e condizioni, che spesso usano dimensioni o colori meno evidenti del titolo.

Verificare loghi, immagini trasparenti e campi del modulo

Un logo scuro con sfondo trasparente può perdere riconoscibilità su una superficie scura. Valuta una versione del marchio adatta o una superficie di appoggio coerente con l’identità visiva. Evita una trasformazione indiscriminata delle immagini: fotografie di prodotti, materiali e ambienti devono mantenere colori attendibili. La scelta va controllata con i file effettivi, non soltanto con un segnaposto.

Nei moduli prova testo inserito, suggerimenti, selezioni e messaggi di errore. Verifica che un campo compilato automaticamente non assuma una combinazione diversa e poco leggibile. Calendari, sistemi di prenotazione e widget di terze parti possono avere impostazioni proprie: controlla il percorso completo e assegna gli interventi al responsabile corretto. Se una funzione risulta inutilizzabile, prepara un’alternativa di contatto mentre si corregge il componente, senza chiedere sistematicamente ai clienti di cambiare le proprie preferenze.

Rendere prevedibile il passaggio fra chiaro e scuro

Se il sito offre un selettore del tema, il visitatore deve capire quale opzione è attiva e poterla cambiare con tastiera e tocco. Definisci che cosa accade quando viene scelta la preferenza di sistema e quale precedenza abbia un’impostazione manuale. Passa poi dalla homepage a una pagina interna: l’aspetto non dovrebbe cambiare senza una ragione comprensibile.

Esempio ipotetico: il cliente seleziona il tema scuro nella pagina di una camera, ma il modulo di richiesta torna chiaro con alcuni testi ancora chiari. La correzione deve riguardare la gestione condivisa del tema e i componenti coinvolti, non soltanto quel testo. Prova anche una nuova visita e il cambio della preferenza del dispositivo mentre la pagina è aperta. Documenta ciò che il sito supporta realmente, senza promettere lo stesso comportamento per qualsiasi estensione esterna.

Conservare una matrice di verifica per gli aggiornamenti

Prepara un controllo ripetibile con pagina, tema, dispositivo, stato del componente ed esito. Le schermate aiutano a confrontare le versioni, ma non sostituiscono l’uso di menu, moduli e finestre. Dopo le correzioni verifica anche il tema che funzionava prima, così una modifica locale non introduce un nuovo problema altrove.

Consegna al team che aggiorna il sito le combinazioni approvate e le indicazioni per loghi, icone e nuovi riquadri. Un blocco promozionale aggiunto in seguito può usare colori estranei alle regole condivise e reintrodurre il difetto. Inserisci queste prove nella manutenzione del sito, soprattutto dopo modifiche al tema o alle integrazioni. L’obiettivo è mantenere leggibili le informazioni e utilizzabili le azioni nelle modalità previste, con responsabilità chiare quando un componente esterno richiede assistenza.

Domande frequenti

Devo aggiungere la modalità scura a ogni sito?

Non è una scelta automatica. Valuta pubblico, contenuti e manutenzione necessaria. Occorre comunque verificare che le impostazioni dichiarate dal sito non producano controlli o testi illeggibili.

Basta invertire tutti i colori per creare il tema scuro?

No. Testi, superfici, loghi, fotografie e controlli richiedono verifiche diverse. Una trasformazione globale può alterare immagini e creare combinazioni di colore poco leggibili.

La modalità scura rende il sito automaticamente accessibile?

No. È una delle condizioni di visualizzazione da controllare. Accessibilità, navigazione da tastiera, etichette, ingrandimento e altri requisiti richiedono una valutazione più ampia.