Un contrasto insufficiente tra testo e sfondo è uno dei problemi più frequenti nelle scansioni di accessibilità, e allo stesso tempo uno degli errori più facili da prevenire. Le cose vanno male quando il testo grigio chiaro si trova su uno sfondo bianco, quando i pulsanti sono visibili solo grazie a un sottile cambio di colore, o quando il testo segnaposto in un campo modulo serve come unica indicazione di ciò che deve essere compilato. Per le persone con disabilità visiva, così come per chiunque utilizzi uno schermo alla luce diretta del sole, il testo diventa letteralmente illeggibile.
WCAG 2.1, lo standard cui EN 301 549 si riferisce, prescrive a livello AA un rapporto di contrasto minimo tra testo e lo sfondo su cui si trova: generalmente 4,5 a 1 per il testo normale e 3 a 1 per il testo grande e per gli elementi interattivi come pulsanti e bordi di campi modulo. Sembra tecnico, ma il concetto di base è semplice: il contrasto non è una scelta estetica, è una condizione per trasmettere informazioni.
Dove le cose vanno male nella pratica
I problemi di contrasto raramente insorgono intenzionalmente. Si insinuano attraverso scelte di identità visiva che sembrano perfette su uno schermo grande e nitido in uno studio di progettazione, ma su uno schermo medio di un utente medio rimangono appena sotto lo standard. Un testo di pulsante grigio chiaro su uno sfondo di colore pastello è un esempio classico. Lo stesso vale per i link identificabili solo per un cambio di colore, senza sottolineatura o altro segnale visivo, per cui le persone daltoniche semplicemente non li vedono come cliccabili.
Un altro schema ricorrente è lo stato hover: un pulsante che a riposo soddisfa benissimo gli standard, ma quando si muove il mouse cambia verso una combinazione di colori che non è stata testata. Anche i messaggi di errore nei moduli sono un errore comune: il testo rosso su uno sfondo rosso chiaro sembra coerente con l'identità visiva, ma spesso non raggiunge il rapporto richiesto. Chi è curioso di vedere come questi problemi si manifestano nel proprio ambiente può scoprirlo in poche domande per vedere dove si trova il vostro sito senza dover prima creare un account.
Perché una scansione automatica lo risolve in parte, ma non completamente
I rapporti di contrasto sono facili da misurare automaticamente: uno scanner legge i valori di colore del testo e dello sfondo e calcola il rapporto. È quindi uno dei pochi criteri WCAG che uno strumento può testare in modo affidabile. Quello che una scansione non vede è il contrasto che emerge solo dopo un'interazione, come un menu a discesa, un tooltip che appare al focus, o uno stato che diventa visibile solo dopo un'azione dell'utente. È proprio per questo che ogni rapporto specifica quale parte è stata testata automaticamente e quale parte richiede una valutazione manuale; il contrasto è un punto di forza dei test automatici, ma non è l'intera immagine.
Come evitarlo strutturalmente
Il modo più comune per prevenire permanentemente questo problema è fissare il contrasto a livello di sistema di progettazione piuttosto che per ogni singola pagina. Quando i colori di base dell'identità visiva vengono già testati rispetto allo standard al momento della definizione, un redattore o uno sviluppatore non deve controllarlo ogni volta di nuovo. Questo evita anche che una nuova pagina, un banner promozionale temporaneo o un widget acquistato esternamente comprometta il rapporto di contrasto senza essere notato.
È inoltre opportuno considerare il contrasto in modo esplicito ad ogni modifica visiva del sito, non solo al primo rilascio. Un rinnovamento dell'identità visiva, un nuovo tema stagionale o uno stile di pulsante modificato può introdurre un problema che non esisteva nella versione precedente. L'accessibilità non è in questo senso una casella da spuntare una sola volta, ma un aspetto di attenzione che accompagna la manutenzione. Per ulteriori informazioni su come funziona in pratica un controllo continuo, leggere una spiegazione dell'origine della valutazione.
Infine, vale la pena non guardare solo alla norma minima, ma all'intento sottostante: tutti, anche in condizioni di illuminazione meno ideali o su uno schermo più vecchio, riescono effettivamente a distinguere il testo e i pulsanti. I casi di dubbio più frequenti, come se un logo o un'immagine decorativa devono rispettare i requisiti di contrasto, sono elaborati nella pagina con risposte a domande che ricorrono più frequentemente.
Volete sapere se il contrasto e gli altri problemi ricorrenti si verificano anche nel vostro ambiente? La quick-scan gratuita fornisce un primo indicatore, e la banca dati di conoscenze con argomenti selezionati per situazione mostra come questo tema si collega al resto degli obblighi relativi alla European Accessibility Act.