Percorso di navigazione nel sito per arrivare a questa pagina:

home » articoli » fogli di stile » Color e background-color

Color e background-color

Da alcuni mesi il programma di validazione dei fogli di stile del W3C offre una serie di nuovi avvisi: uno di questi riguarda le proprietà color e background-color. Se sottoponiamo all'esame del validatore queste righe di codice:

body {
  background-color: #ffffff;
  color: #000000;
  }

h1 {
  color: #cc0000;
  }

#box {
  background-color: #990000;
  }

possiamo leggere il seguente messaggio di avviso:

Warnings

URI : file://localhost/TextArea

  • Line : 7 (Level : 1) You have no background-color with your color : h1
  • Line : 11 (Level : 1) You have no color with your background-color : #box

In pratica il validatore ci consiglia di dichiarare esplicitamente il background-color ogni volta che attribuiamo un colore al testo e viceversa, al fine di assicurare l'accessibilità dei contenuti della nostra pagina.

Infatti, se il colore di sfondo non viene dichiarato, questo potrebbe essere ereditato da un qualsiasi elemento progenitore (quale dipende da come è strutturato il codice (x)html): potrebbe quindi succedere - ad esempio - che una scritta scura erediti inavvertitamente uno sfondo scuro, risultando di fatto scarsamente leggibile o del tutto illeggibile. Il problema non si verifica invece quando tutto è ben dichiarato.

Sorge spontanea una prima obiezione: ma il validatore, anziché controllare il solo css come fa adesso, non potrebbe analizzare anche il modo in cui questo viene applicato nelle pagine del sito e mostrare un avviso soltanto quando l'ereditarietà delle proprietà color e background-color compromette la leggibilità? Sarebbe sicuramente una cosa utile, ma si tratterebbe in ogni caso di una verifica a posteriori, che non offre alcuna garanzia a priori sulle pagine di prossima pubblicazione.

Seconda obiezione: un autore attento controlla comunque le pagine prima di pubblicarle, per verificare che tutto funzioni a dovere e apportare eventuali correzioni! Questo tipo di verifica manuale, che richiede pazienza e precisione, è fattibile quando si tratta di siti statici, ma se pensiamo ad un sito i cui contenuti sono generati dinamicamente tutto ciò diventa improponibile: i testi possono essere aggiornati più volte al giorno, magari da più persone, dando origine ad un numero elevato di nuove pagine, con combinazioni di annidamenti di tag (e di guai) imprevedibili. Insomma, una situazione non più controllabile: ci occorre una garanzia a priori.

Non solo: la verifica manuale ha pieno successo solo quando il layout del sito è rigidamente definito: il testo resta infatti posizionato lì dove e come l'autore l'ha messo, indipendentemente dalle modalità di visualizzazione da parte dell'utente. Ma se si tratta di un sito realizzato con la tecnica dei float, ad esempio, la situazione si complica: un contenitore può cambiare posizione, scivolando sotto ad un altro, quando si ridimensiona la finestra del browser. Cosa succederà in questo caso? Su quale sfondo il testo andrà a sovrapporsi? Sarà ancora leggibile?

Il validatore ci mette sull'avviso: se dichiariamo correttamente sia color che background-color la nostra accoppiata risulterà sempre leggibile, indipendentemente da dove le parole andranno a posizionarsi e indipendentemente dalle tecniche usate per realizzare la grafica e per gestire i contenuti del sito.

Due osservazioni importanti. Il validatore css di per sé non verifica il contrasto tra i colori, ma soltanto che entrambi i parametri necessari per questa valutazione siano dichiarati e non siano identici. Il passo successivo, cioè valutare se le diverse coppie color / background-color offrono un contrasto sufficiente, sarà realizzato utilizzando altri strumenti, ad esempio quelli che si trovano a questi indirizzi:

Occorre anche dire che l'assenza di background-color non compromette formalmente la validazione: è un warning (= fai attenzione che...), non un errore. Ma concettualmente è un warning importante: specie in siti complessi, ma non solo in quelli, prima o poi una svista scappa e ci ritroveremo - per effetto dell'annidamento di tag che ereditano dal progenitore colore o sfondo - un testo scarsamente leggibile. Per questo stesso motivo, il validatore non si lascia ingannare: provate a usare background-color: inherit; oppure background-color: transparent; e noterete che l'avviso resta.

In conclusione, con questo avviso il validatore ci offre uno strumento in più per lavorare nella direzione dell'accessibilità. Il prezzo da pagare? Un css con qualche riga in più, forse un po' appesantito, nel quale vengono meno alcuni automatismi dell'ereditarietà. Tutto sommato un piccolo prezzo, a fronte di un grande vantaggio.

Nei tutorials di ProgettareWeb potete trovare due esempi relativi alla dichiarazione di color e background-color: il primo analizza la struttura di un css "prima e dopo la cura", il secondo i problemi che possono verificarsi in una pagina costruita con la tecnica dei float opposti e delle false colonne.

10 dicembre 2005