Compatibilità:

WebSite X5 Evo e Pro

Uno degli aspetti fondamentali nella realizzazione di un sito web accessibile è il contrasto dei colori. 


Un contrasto inadeguato può rappresentare un ostacolo significativo per le persone con disabilità visive durante la navigazione. Pertanto, è essenziale prestare particolare attenzione alla scelta dei colori, assicurandosi che offrano sempre un contrasto appropriato. Questo non solo migliora l'esperienza di navigazione per le persone con disabilità, ma contribuisce anche a un design più curato e funzionale, avvantaggiando tutti gli utenti.


In questa guida parleremo di:


Il contrasto dei colori: cosa si intende e perché è importante per l'accessibilità web

Il contrasto dei colori si riferisce alla differenza di luminosità tra il testo (o altri elementi in primo piano) e lo sfondo su cui è posizionato. Questa differenza di luminosità è espressa come un rapporto che va da 1:1 (ad esempio bianco su bianco) a 21:1 (ad esempio, nero su bianco). Per dare un quadro di riferimento, su uno sfondo bianco:

  • Il rosso puro (#FF0000) ha un rapporto di 4:1. Per esempio: "Io sono rosso".
  • Il verde puro (#00FF00) ha un rapporto molto basso, pari a 1,4:1. Per esempio: "Io sono verde".
  • Il blu puro (#0000FF) ha un rapporto di contrasto di 8,6:1. Per esempio: "Io sono blu".

Anche alla luce di questi esempi, è facile comprendere che un contrasto insufficiente può rendere difficile la lettura, specialmente per persone con disabilità visive o condizioni come il daltonismo. Dunque, assicurare un contrasto adeguato migliora l'usabilità e l'accessibilità del sito.


Linee guida WCAG - I criteri di successo per migliorare il contrasto dei colori

Come occorre regolarsi per la corretta gestione del contrasto dei colori? I criteri di successo delle Linee Guida sull'Accessibilità dei Contenuti Web (WCAG) a cui fare riferimento sono essenzialmente 3:

A questi si aggiunge il criterio di successo 1.4.1 Uso del colore che fa rifermento al rapporto di contrasto per indicare come trattare correttamente i collegamenti che si differenziano solo per l'uso del colore.   


1.4.3 Contrasto (minimo)

Secondo le linee guida citate, il testo deve avere un contrasto di colore sufficiente con lo sfondo in cui è mostrato per poter essere facilmente leggibile.  A tal fine, il criterio sul Contrasto minimo dice che il livello di contrasto deve essere almeno 4,5:1 per il testo normale e 3:1 per il testo grande o in grassetto. 


Quelli che seguono sono esempi di testo con un contrasto quasi esattamente pari a 4,5:1.

  • Grigio (#767676) su bianco
  • Viola (#CC21CC) bianco
  • Blu (#000063) su grigio (#808080)
  • Rosso (#E60000) su giallo (#FFFF47)

In effetti, per molti di noi alcune di queste combinazioni, pur rispettando il rapporto di contrasto richiesto, non sono comunque molto leggibili. Ecco perché il rapporto 4.5:1 è il minimo richiesto da WCAG.


È importante sottolineare che il criterio del contrasto minimo si applica anche nel caso di testi posizionati all'interno di un'immagine. Nell'immagine seguente, per esempio, il testo non ha un contrasto sufficiente.


Le WCAG 2 specificano poi che il colore usato come contorno, alone o sfondo del testo può essere considerato come colore di primo piano quando si misura in contrasto. In base a questa precisazione, le seguenti scritte hanno tutte lo stesso rapporto di contrasto.  


Infine, occorre ricordare che ci sono delle eccezioni al requisito del contrasto minimo: 

  • Testo di grandi dimensioni: per le WCAG è un testo di 18 punti (corrispondenti a 24 pixel) o superiore o, se in grassetto, di 14 punti (corrispondenti a 18.67 pixel) o superiore. In questi casi, dato che è un testo già più facile da leggere, il rapporto di contrasto da rispettare è ridotto a 3:1.
  • Testo incidentale: si tratta di testi che fanno parte di elementi inattivi (es: un pulsante nella stato disabilitato), testi puramente decorativi, testi nascosti o che fanno parte di un'immagine e non danno informazioni importanti (es: la scritta sulla maglietta di una persona). Sono tutti testi per i quali non è necessario rispettare i requisiti di contrasto.   
  • Loghi: il testo che fa parte di un logo o di un nome di marca non deve rispettare alcun requisito di contrasto.  


1.4.6 Contrasto (migliorato)

Rispettare il requisito del Contrasto minimo consente di raggiungere la conformità a Livello AA che è quella richiesta dalle normative vigenti. Il requisito del Contrasto migliorato fa un passo ulteriore e richiede un contrasto di 7:1 per il testo normale e di 4.5:1 per il testi di dimensioni maggiori. Rispettare questo criterio più rigoroso è un passo per accedere al Livello AAA di accessibilità: può essere consigliato, ma non è richiesto.      


1.4.11 Contrasto non testuale

Il criterio del Contrasto non testuale (Livello AA) stabilisce che per i componenti dell'interfaccia utente e gli oggetti grafici è necessario rispettare un contrasto di almeno 3:1 tra i colori adiacenti. 


Tra i componenti dell'interfaccia utente troviamo, per esempio, i pulsanti o i campi dei moduli e-mail: in linea generale tutti i colori usati per i diversi stati di questi componenti devono rispettare il rapporto di contrasto 3:1, a meno che non vengano utilizzati gli stili predefiniti dal browser.


Per quanto riguarda gli elementi grafici, invece, occorre che rispettino il rapporto di contrasto fissato solo se sono necessari per comprendere il contenuto e, comunque, a patto che il rispetto del criterio non comporti una modifica tale da comprometterne il significato. Foto, screenshot e loghi rientrano in questa categoria: anche se contengono colori adiacenti che non rispettano il contrasto richiesto non vanno modificate.  


1.4.1 Uso del colore

Il criterio 1.4.1 richiede che il colore non venga utilizzato come unico mezzo visivo per presentare informazioni o istruzioni significative. 


Facciamo un esempio per comprendere meglio cosa richiede questo criterio. Limitarsi a evidenziare in rosso il bordo dei campi non compilati di un modulo e-mail non è corretto: in questo modo, infatti, per chi non vede o non distingue il colore rosso, è impossibile accorgersi del messaggio d'errore. Se però, oltre al bordo rosso, viene visualizzata anche un'icona di allerta, il messaggio diventa chiaro per tutti.


Il criterio sull'uso del colore e quelli sul contrasto si sovrappongono quando il colore è utilizzato come unico elemento per distinguere un collegamento. Quando il collegamento è inserito all'interno di un testo (quindi, non i collegamenti del menu di navigazione) e il colore è l'unico elemento per identificarlo (perché è stata rimossa la sottolineatura), è necessario che:

  • Il testo del collegamento abbia un rapporto di contrasto di 4.5:1 (Criterio 1.4.3 del Contrasto minimo).
  • Sia rispettato un rapporto di contrasto 3:1 tra il corpo del testo e il testo del collegamento. (Criterio 1.4.11 del Contrasto non testuale). 
  • Ci sia un "suggerimento visivo" (non solo un cambio di colore) che appare al passaggio del mouse come, per esempio, la comparsa della sottolineatura. (Criterio 1.4.1 dell'Uso del colore).

Soddisfare tutti e tre questi requisiti contemporaneamente può essere difficile, soprattutto considerando che i colori dei collegamenti possono cambiare per i vari stati. Per questo, molto spesso, la scelta più semplice per un'accessibilità e un'usabilità ottimali, è mantenere la sottolineatura sui collegamenti. 


Gestire il contrasto dei colori in WebSite X5

In WebSite X5, ci sono molte situazioni in cui è necessario impostare un colore o definire le dimensioni di un testo: dalla personalizzazione degli stili nei vari editor di testo, fino alla creazione di elementi come pulsanti, form e gallerie.


Il software offre piena libertà di scelta, senza imporre limitazioni sulle combinazioni di colori. Tuttavia, è responsabilità dell’utente assicurarsi che il contrasto sia adeguato per garantire pagine accessibili.


Per facilitare questa verifica, puoi utilizzare strumenti online progettati appositamente per controllare se il contrasto tra due colori è conforme agli standard di accessibilità web stabiliti dalle WCAG. Tra i più popolari troviamo: 


Ecco alcuni consigli per gestire correttamente il contrasto dei colori e migliorare l’accessibilità del tuo sito:

  • Utilizza colori ad alto contrasto tra testo e sfondo.
  • Evita combinazioni di colori troppo simili, che potrebbero rendere il testo poco leggibile.
  • Assicurati che il testo sia sufficientemente grande e facile da leggere.
  • Usa grassetto o corsivo per evidenziare le informazioni importanti.
  • Rendi i collegamenti facilmente identificabili, senza fare affidamento esclusivamente sul colore.
  • Non trasmettere informazioni essenziali solo attraverso il colore, ma abbinale ad altri indicatori visivi (ad esempio, sottolineature o icone).


Seguendo queste linee guida, potrai migliorare l’accessibilità del tuo sito e offrire un’esperienza di navigazione ottimale per tutti gli utenti.