Uno dei requisiti più importanti per rendere un sito accessibile è quello che riguarda il contrasto colori. Tradotto in parole semplici, significa che tra testo e sfondo deve esserci una differenza di colori tale che il testo sia ben visibile, che spicchi sullo sfondo.
Spesso ciò che a un web designer sembra abbastanza visibile, in realtà non lo è per tutti. E non mi riferisco solo a chi ha un deficit visivo o una forma di daltonismo. Anche chi ci vede benissimo, in determinate situazioni potrebbe aver bisogno di un maggiore contrasto. Pensiamo, ad esempio, a quando guardiamo il cellulare in pieno sole. Se i colori del testo e dello sfondo non sono ben combinati, le scritte si confondono e facciamo fatica.
Pensare a progettare un sito web con un contrasto colori ben evidente, quindi, è un bene per tutti i visitatori delle nostre pagine.
Come si calcola il rapporto di contrasto
Per assicurarci che il contrasto tra sfondo e testo sia sufficiente, esiste una vera e propria formula matematica. Evitiamo di tornare tra i banchi di scuola, lascia pure la calcolatrice nel cassetto, e limitiamoci solamente a comprendere il principio.
Innanzitutto, bisogna sapere che possiamo “tradurre” ogni colore con un codice. Ci sono diversi sistemi di codici per definire i colori sul web, ma i più diffusi sono due. Il primo è il codice esadecimale ed è formato da sei caratteri alfanumerici, cioè una serie di sei caratteri che possono essere numeri da 0 a 9 e lettere da A a F.
Ad esempio, il codice #FFFFFF è il bianco, #000000 è il nero, #981E0B è un rosso scuro.
Il secondo è il codice RGB, una serie di tre numeri che vanno da 0 a 255, separati da una virgola, ed è proprio da questo che si parte per poi calcolare il rapporto di contrasto colori.
Tornando al nostro esempio, rgb(255, 255, 255) è il bianco, rgb(0, 0, 0) è il nero, rgb(152, 30, 11) è il rosso scuro di prima.
Se conosci solo il codice esadecimale, nessun problema: esiste una formula matematica per convertire un codice colore da esadecimale a RGB.
Una volta ottenuto il codice RGB, si esegue un calcolo che determina la luminanza relativa di quel colore, o, in parole povere “quanto è luminoso” quel colore.
Ora, prendo la luminanza relativa del testo, la metto in rapporto alla luminanza relativa dello sfondo, e ottengo un valore chiamato rapporto (o fattore) di contrasto. Questo numero è quello che ci serve per sapere se il contrasto colori è sufficiente.
Quali sono i valori del rapporto di contrasto da rispettare
Il rapporto di contrasto deve essere un numero al di sopra dei valori minimi indicati dalle WCAG.
Le linee guida fanno una distinzione in base al livello di accessibilità che si vuole raggiungere.
Per il livello base, chiamato livello AA, il rapporto di contrasto deve essere:
- testo normale: almeno 4,5:1
- testo grande: almeno 3:1
Per il livello avanzato, cioè il livello AAA, il rapporto di contrasto deve essere:
- testo normale: 7:1
- testo grande: 4,5:1
I testi che non fanno parte degli elementi attivi dell’interfaccia utente, quelli puramente decorativi, non visibili a nessuno o che fanno parte di un’immagine con altri contenuti visivi significativi, non devono rispettare questi requisiti di contrasto colori.
Spieghiamo meglio questi concetti.
Cosa si intende per testo grande nelle WCAG?
Le linee guida WCAG ci parlano di diversi fattori di contrasto in base alla dimensione del testo, che identifica come “normale” e “grande”.
Con “testo grande” si intende un carattere che abbia almeno:
- font di dimensioni 14pt (ovvero 18.66px) e in grassetto
- font di dimensioni 18pt (ovvero 24px) – anche non in grassetto.
I font di dimensioni minori sono considerati “testo normale”.
Attenzione: questo non significa che puoi usare un font di 2px, anche se rispetti i requisiti di contrasto!
Cosa sono gli elementi grafici e i componenti dell’interfaccia nelle WCAG?
Il contrasto non è un requisito esclusivo del testo in rapporto allo sfondo. Ci sono altri elementi in una pagina web che possono diventare difficili da vedere se il contrasto non è sufficiente. Qualche esempio:
- le icone
- i bordi
- i pulsanti
- cursori
- parti di grafici
Se questi elementi sono necessari per comprendere il contenuto o utilizzare il sito, devono rispettare le linee guida sul contrasto.
Ti stai chiedendo come fare a sapere se fra i colori del tuo sito web c’è un contrasto sufficiente? Come promesso, niente calcolatrice.
Esistono per fortuna degli strumenti automatici che permettono di svolgere questi calcoli in un istante.
Uno dei più affidabili è il Contrast Checker di WebAIM.
Testare il contrasto colori con il Contrast Checker
WebAIM è un’organizzazione no-profit degli Stati Uniti che fin dal 1999 fornisce strumenti, servizi, formazione e materiali utili per l’accessibilità sul web.
Uno dei loro strumenti più utilizzati è il Contrast Checker. Il suo uso è estremamente semplice e ti fornisce un responso immediato.
Sulla pagina del Contrast Checker, troverai due riquadri. Il primo, Foreground, indica il testo, ciò che è in risalto. Il secondo, Background, si riferisce invece allo sfondo.
Nel primo riquadro, inserisci all’interno del campo di editazione il codice esadecimale del colore del testo. Nel secondo, inserisci il codice esadecimale del colore dello sfondo.
Premi Invio per ottenere il rapporto di contrasto fra questi due colori.
Scorrendo più in basso, scoprirai anche se questo valore rispetta i requisiti.
Infatti, lo strumento ti dirà il risultato sia per il livello AA che per il livello AAA. Se il risultato è Fail, in rosso, il contrasto non è sufficiente. Se invece è Pass, in verde, i requisiti sono raggiunti.
Questa valutazione viene fatta sia per il testo normale, sia per il testo grande, sia per gli oggetti grafici e componenti dell’interfaccia utente.
Accanto a ciascuna sezione, visualizzerai a video l’esempio con i colori da te inseriti.
Usare i codici RGB nel Contrast Checker
Se hai i codici RGB dei colori che vuoi testare, puoi inserire direttamente quelli. Al di sotto del campo con il codice esadecimale, troverai un riquadro nominato “Color picker”. Aprilo per scegliere un colore dalla tavolozza, oppure per inserire il codice RGB.
Troverai, infatti, tre campi:
- R – per inserire il valore del Red (rosso)
- G – per inserire il valore del Green (verde)
- B – per inserire il valore del Blue (blu)
Link Contrast Checker
Un altro strumento utilissimo fornito sempre da WebAIM è il Link Contrast Checker. In questo caso, ci sono tre valori da inserire:
- il colore del link
- il colore del testo semplice
- il colore del contrasto.
I risultati ti mostreranno i fattori di contrasto fra:
- link e testo
- link e sfondo
- testo e sfondo
Conclusione
La scelta dei colori di testo e sfondo, o dei link e degli altri elementi sulla pagina, va ben oltre la pura estetica. Un errore nel rapporto di contrasto potrebbe creare un grosso limite per molte persone che visitano il tuo sito web.
Fortunatamente, abbiamo a disposizione strumenti semplicissimi da usare che ci aiutano nella scelta dei colori.
Ricordiamoci, però, che le linee guida sul contrasto colori non sono le uniche indicazioni riguardo alla scelta dei colori. Le WCAG prevedono anche altre situazioni a cui fare attenzione… ma ne parleremo in un prossimo articolo. Per oggi ti ho fuso abbastanza!