Il colore è una caratteristica importante che definisce buona parte dell’aspetto grafico di una pagina web. Siamo quotidianamente abituati a navigare siti con diversi giochi cromatici e sfumature ma spesso non ci poniamo minimamente il problema se siano accessibili o meno. In questo articolo faremo un viaggio nel colore, capiremo come e quando va utilizzato ma soprattutto perché.
In fase di accessibilità ogni dettaglio fa la differenza e ciò che sembrano semplici scelte grafiche dettate dall’estro del web designer ptorebbero risultare fatali ad una validazione.
Il colore non è un veicolo dominante!
In realtà, in fase di progettazione grafica bisogna tener conto di quelle persone che hanno difficoltà a percepire il colore o che fanno utilizzo di solo testo, oppure, per qualsiasi motivo hanno un accesso limitato alle informazioni cromatiche. In questi termini il WCAG 2.0 parla chiaro:
1.4.1 Uso del colore: Il colore non deve essere utilizzato come unica modalità visiva per rappresentare informazioni, indicare azioni, richiedere risposte o come elemento di distinzione visiva. (Livello A)
Nota: Questo criterio di successo è specifico per la percezione del colore. Altre modalità di percezione sono presenti nella linea guida 1.3, incluso l’accesso programmatico al colore e ad altre codifiche visive della presentazione.
In sostanza, è opportuno progettare un sito web assicurandosi che l’informazione veicolata dal colore sia fruibile attraverso un mezzo alternativo.
Accessibilità e contrasto
Le persone che, per qualsiasi motivo non godono di un’eccellente vista avranno problemi di lettura della pagina web quando non c’è abbastanza contrasto tra i testi e il colore di sfondo.
1.4.3 Contrasto (minimo): La rappresentazione visiva del testo e di immagini contenenti testo ha un rapporto di contrasto di almeno 4.5:1.
1.4.6 Contrasto (avanzato): La rappresentazione visiva del testo e immagini contenenti testo ha un rapporto di contrasto di almeno 7:1.
Determinare se vi sia sufficiente contrasto di colore tra gli elementi che compongono una pagina web è difficile. WCAG 2.0 ha fornito delle linee guida composte da una formula complessa per determinare un rapporto di contrasto. Per agevolare il compito, online sono presenti svariati “analizzatori” di colore preposti a svolgere il lavoro al posto vostro. Il più quotato è sicuramente Contrast Analyser.
E’ principalmente uno strumento per la verifica delle combinazioni di colori per determinare se forniscono una buona visibilità nel complesso. Contrast Analyser contiene anche la funzionalità per creare simulazioni di alcuni condizioni visive come il daltonismo basandosi sull’algoritmo di rapporto di contrasto suggerito dal World Wide Web Consortium (W3C):
L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
Suggerisco altri tool che vanno per la maggiore:
Non porre limite alla creatività
Realizzare un layout per un sito web accessibile può sicuramente mettere un freno alla creatività poiché ogni scelta va ponderata con estrema minuziosità, ma ciò non significa che i nostri lavori devono "standardizzarsi" e livellarsi verso il basso.
Anche seguendo attentamente le regole che WCAG impone, un professionista deve essere in grado di trovare il giusto compromesso grafico attenendosi alle regole.
