Quanto conta la palette del tuo sito WordPress per l’accessibilità?

Il tuo sito WordPress deve rispecchiare la tua identità e il tuo brand ma quanto di questa voglia di distinguersi può influire sulla accessibilità dei contenuti e dei prodotti che eventualmente offri?

Su internet si parla spesso di creare qualcosa che vada bene per quella creatura fantomatica che va sotto il nome di utente medio. Anche quando cerchi di dare forma a quello che è il target audience dei contenuti che crei quello che fai nei fatti è crearti un tuo utente tipo. Più è dettagliato l’identikit di chi potrebbe trovare interessante e utile ciò che offri è più è facile incontrarlo. Proprio come succede con le app di incontri.

Ma, esattamente come succede con qualunque app di incontri, avere uno schema troppo rigido e quindi pensare che il tuo utente ideale debba necessariamente corrispondere e accendere tutte le lampadine è un errore. Soprattutto se l’identikit non è costruito con l’elasticità mentale che viene dal pensare in termini di accessibilità. Ma volendo essere accessibili, come si costruisce una palette? Come si organizzano i contenuti e le immagini? Devi necessariamente dire addio ai colori che avevi scelto e fare tutto bianco e nero?

Colori e accessibilità di un sito WordPress, le linee guida

Anche nel caso tu non possieda una spiccata propensione verso il prossimo potresti trovare comunque giovamento dall’implementare alcuni piccoli stratagemmi per aumentare l’accessibilità dei tuoi contenuti e quindi la portata potenziale del tuo sito WordPress. Oppure, una situazione molto diffusa, in realtà forse non ti sei mai chiesto se il tuo sito WordPress, come qualunque altro sito web, sia o meno accessibile a un pubblico più vasto.

Per chi possiede una qualche forma di disabilità esistono adesso strumenti che permettono di utilizzare il web in maniera autonoma ma ciò non toglie che, per alcune disabilità o condizioni specifiche, più che qualche strumento esterno basterebbe pensare un po’ più approfonditamente a quello che si mette online per rendere l’esperienza più liscia per tutti. A tal proposito, parlando di palette e dell’importanza dei colori nell’esperienza degli utenti, ti consigliamo in prima battuta il video relativo al WordCamp Italia 2022 in cui Stefano Minoia parla proprio di palette accessibili.

Non si tratta solo di scegliere quali sono per esempio i migliori colori che puoi mettere sul tuo sito web, per i quali ti consigliamo di andare a controllare anche i codici HTML per essere sicuro che siano effettivamente quelli che tu pensi. Si tratta di progettare la palette e quindi l’immagine coordinata di un brand in modo tale che poi, nella eventualità che quella immagine coordinata e quei colori debbano finire utilizzati su un sito web, l’esperienza degli utenti non risulta difficile.

Nel video intervento di Minoia si fa riferimento in prima battuta alle linee guida del WCAG, le linee guida che permettono agli sviluppatori di siti web, e ai grafici e ai brand designer e ai gestori di siti web tutti di creare un Internet più accessibile in partenza. Le linee guida riguardano tutti gli aspetti che costruiscono un sito web ma nel nostro caso concentriamoci solo su quelli che sono i colori. Un primo criterio presente è quello che riguarda l’utilizzo del colore: “il colore non deve essere utilizzato come unica modalità visiva per rappresentare informazioni, indicare azioni, chiedere risposte o come elemento di distinzione visiva“. Ciò significa, facendo un esempio, che se su un contenuto l’unico modo in cui si distingue un link cliccabile è il cambio di colore del font chi ha problemi a percepire i colori probabilmente perderà il link e l’eventuale contenuto ad esso collegato.

Parlando di palette e di colori un elemento molto importante che devi poi sviluppare bene sul tuo sito è la questione del contrasto tra sfondo e testo, soprattutto quando il testo identifica gli elementi utili che permettono la navigazione. Ma che cos’è il contrasto? Sempre rifacendoci all’intervento di Minoia, il contrasto è “una differenza nella percezione visiva di due o più elementi” e questi elementi possono essere presentati contemporaneamente oppure in successione. Un esempio di contrasto di elementi presentati simultaneamente è quello che accade se hai uno spazio titolo con sfondo di un colore e font di un altro colore. Se il contrasto tra il colore dello sfondo e il colore del font non è adeguato, il testo potrebbe non risultare leggibile o leggibile con fatica. Ma in contrasto non avviene soltanto mettendo colori diversi.

Esistono infatti due categorie diverse di contrasto su cui puoi giocare per aumentare l’accessibilità dei tuoi contenuti (o valutarla): da una parte il contrasto luminoso e dall’altra il contrasto cromatico. Il contrasto cromatico è quello più facilmente individuabile: giallo e blu, rosso e bianco, bianco e nero. Due colori molto lontani che messi uno sull’altro o uno accanto all’altro rimangono perfettamente distinguibili.

Ma c’è anche il cosiddetto contrasto luminoso che riguarda le ombre di colore, ovvero quanto nero viene aggiunto al colore puro di partenza. Il contrasto che passa per esempio tra rosso e nero è diverso rispetto al bordeaux e nero, perché nel bordeaux c’è una quantità di nero superiore al rosso puro che lo avvicina al nero. Oppure rosso e bianco: il contrasto luminoso tra rosso puro e bianco è superiore rispetto a un rosa in cui è stato aggiunto il bianco aumentandone così la luminosità. Giocare con ombre e tinte è indispensabile se stai mettendo insieme la palette per il tuo sito WordPress.

Un esempio su cui riflettere

Realizzare elementi e una palette che abbia un buon contrasto luminoso e cromatico non significa che devi per forza dire addio allo stile che vorresti implementare e che ti rappresenta o vuoi che ti rappresenti. Se hai idea di utilizzare per esempio il bordeaux e il nero (perché il tuo brand si occupa di lingerie di lusso e il bordeaux e il nero sono i colori che più di tutti dicono lusso) non dovrai abbandonare questa idea per aumentare l’accessibilità.

Dovrai solo organizzare la tua palette in maniera tale da dare spazio anche ad un colore che possa fungere da trampolino per aumentare il contrasto sia del bordeaux sia del nero. Per il nero l’oro è una soluzione come pure per il bordeaux ma di certo non puoi avere un sito WordPress totalmente sfondo oro (no, non puoi: ci sono altre soluzioni). Scelti questi tre colori quello che puoi fare è inserire del bianco come sfondo e utilizzare bordeaux, nero e oro in sezioni ragionate per mantenere la sensazione luxury che cerchi ma senza rendere il tuo sito accessibile solo ad una minima parte di quelli che poi potrebbero essere i tuoi potenziali clienti. E se dopo aver controllato il tuo sito non è accessibile come pensavi? Cambiare palette non è reato.