L'accessibilità web è spesso associata al contrasto dei colori, ma garantire un testo leggibile su uno sfondo non è sempre così semplice. Anche se il nuovo algoritmo APCA rappresenta un avanzamento significativo nella scienza della scelta di colori realmente accessibili, è importante conoscerne le sfide e le criticità.
Agnese Ragucci Quando si parla di accessibilità web, il primo pensiero va spesso ai colori. Tuttavia, assicurarsi che il testo sia leggibile rispetto allo sfondo non è sempre così immediato come potrebbe sembrare. Oggi vedremo come gli standard legali non portino sempre ai risultati desiderati.
Per anni, il Color Contrast Ratio è stato il metodo consolidato per valutare il contrasto tra due colori.
Questo metodo fornisce un valore numerico che indica il livello di contrasto tra il colore di sfondo e il colore in primo piano (tipicamente il testo), calcolato confrontando i valori di luminanza relativa dei colori tramite una formula basata sui valori RGB o HSL. In generale, più alto è il rapporto, migliore è il contrasto e la leggibilità per gli utenti con disabilità visive.
Le linee guida WCAG, in particolare i criteri di successo (SC) 1.4.3, 1.4.6 e 1.4.11, stabiliscono requisiti specifici per il contrasto dei colori, con diversi livelli di conformità (A, AA o AAA) che prevedono criteri differenti. Ad esempio, il livello AA richiede un rapporto di contrasto minimo di 4.5:1 per il testo normale, mentre per il testo grande (sopra i 18pt o 14pt in grassetto) il requisito scende a 3:1.
EightShapes’ Contrast Grid
Tuttavia, la percezione del contrasto non è una qualità intrinseca, ma il risultato di come il nostro cervello interpreta le differenze visive. Anche gli elementi circostanti e il loro scopo influiscono, così come caratteristiche spaziali quali lo spessore del carattere o la larghezza delle linee, che incidono in modo significativo sulla percezione di luminosità. Font più piccoli o sottili riducono il contrasto percepito, richiedendo una differenza di luminosità tra testo e sfondo più marcata per compensare.
Le linee guida sul contrasto di WCAG 2 sono state definite nel 2008, quando le tecnologie di visualizzazione e i contenuti web erano molto diversi rispetto a oggi. Con l’avvento di smartphone e tablet, queste linee guida necessitano di una revisione approfondita per allinearsi ai progressi della tecnologia dei display. È qui che entra in gioco APCA.
L’Accessible Perceptual Contrast Algorithm (APCA) è un nuovo metodo per calcolare e prevedere il contrasto di leggibilità dei colori su display e dispositivi RGB autoilluminati, tenendo conto di:
Myndex Research’s APCA Contrast Calculator
L’APCA Contrast Calculator, sviluppato da Myndex Research, è uno strumento potente che offre informazioni preziose grazie al suo algoritmo. Calcola il valore di Lightness contrast e determina la dimensione minima del testo utilizzabile in base al peso del font. Queste informazioni aiutano a garantire che il testo sia leggibile e accessibile a tutti gli utenti, indipendentemente dalle loro capacità visive.
Un altro aspetto interessante del metodo APCA è che il valore di Lightness contrast (Lc) è basato sulla percezione: un contrasto Lc 60 rappresenta la stessa leggibilità percepita, a prescindere dalla tonalità del colore. Questo si rivelerà particolarmente utile nel progettare interfacce accessibili a utenti con alcune forme di deficit nella percezione dei colori.
La dark mode è un altro contesto in cui l’uso dell’algoritmo APCA porta a risultati significativamente migliori. L’esempio qui sotto mostra che i testi a sinistra sono di livello AA ma affaticano la vista più di quelli a destra. L’algoritmo APCA suggerisce dimensione e peso del font per garantire al testo una luminosità costante, con un’esperienza di lettura più confortevole.
L’APCA Readability Criterion prevede tre livelli di conformità: Bronze, Silver e Gold.
Il livello Bronze è il livello minimo di conformità nell’ARC e copre generalmente solo il testo dei contenuti principali. Definisce infatti casi d’uso per “body text” e “other content text”, senza coprire i testi spot come quelli disabilitati, segnaposto, ausiliari o decorativi. Inoltre non specifica una dimensione minima del font né richiede di confrontare il font usato con un peso o una dimensione di riferimento.
Il livello Silver copre tutto il testo. Gli “other content text” del Bronze vengono qui dettagliati in “fluent text”, “large fluent text” e “sub-fluent text”, e anche i testi spot (disabilitati, segnaposto, ausiliari, decorativi) ricevono una raccomandazione. In base al valore di contrasto Lc, i testi hanno un peso e una dimensione del font raccomandati. La dimensione minima per i contenuti è 13px, con un rapporto x-height di 0,5 (x-height minima di 7,5px), mentre per i testi non di contenuto è 10px.
Infine, il livello Gold migliora i requisiti del Silver: il font deve essere confrontato con un peso e una dimensione di riferimento per ottenere i delta da applicare ai valori raccomandati. La dimensione minima per il testo dei contenuti è 18px, con un rapporto x-height di 0,5 (x-height minima di 9px), mentre per i testi non di contenuto è 12px.
L’algoritmo APCA migliora significativamente il metodo del Color Contrast Ratio per valutare l’accessibilità cromatica. È consigliabile iniziare a implementarlo il prima possibile per migliorare la leggibilità e ampliare il numero di utenti che possono fruire delle esperienze che progettiamo, perché la sua efficacia e utilità sono innegabili.
Tuttavia, va ricordato che i creatori dell’APCA Readability Criterion (ARC) partecipano attivamente allo sviluppo di WCAG 3, all’interno della task force e dei sottogruppi. Questo indica che il metodo APCA verrà prima o poi integrato in altri standard, tra cui ISO e WCAG. È però fondamentale ricordare che al momento si tratta di un insieme di linee guida separate e indipendenti, ancora in fase di sviluppo.
È importante notare che molte normative e standard di accessibilità si basano ancora sul vecchio metodo del Color Contrast Ratio descritto in WCAG 2. Se la conformità a quegli standard è necessaria, è fortemente raccomandato usare combinazioni di colori valide per entrambi gli algoritmi, così da rendere i contenuti accessibili a tutti.
Myndex Research fornisce le seguenti conversioni per i livelli AA e AAA di WCAG 2:
Puoi trovare informazioni più dettagliate su come applicare i principi del metodo APCA restando entro i limiti di WCAG 2 consultando la guida WCAG 2 Compatibility & Enhancements qui.
L’algoritmo APCA rappresenta un notevole passo avanti nella creazione di interfacce utilizzabili da molti utenti, grazie alla definizione di colori davvero accessibili. Anche se a prima vista può sembrare che semplifichi il lavoro consentendo l’uso di colori più brillanti prima non ammessi, è importante notare che questo comporta alcune controindicazioni.
Dal livello di conformità Silver in poi, non solo bisogna considerare due variabili aggiuntive — dimensione e peso del font — ma inizia a diventare rilevante anche il ruolo che il testo riveste nella semantica dell’interfaccia.
Myndex Research’s APCA Contrast Calculator - SAPC development version
Determinare automaticamente la semantica di un testo è una sfida che il settore tecnologico affronta da decenni e che solo di recente, con l’avvento dell’AI, sta diventando più gestibile. Ciò significa che sarà difficile creare strumenti che ci aiutino a verificare a posteriori l’accessibilità delle interfacce secondo le raccomandazioni APCA.
Nella nostra esperienza non è mai troppo tardi per rendere accessibili le interfacce, ma la buona pratica è progettare l’accessibilità di un prodotto fin dal primo giorno, perché lo sforzo cresce esponenzialmente man mano che si avanza nel design e nell’implementazione.
In Buildo crediamo che la tecnologia debba essere uno strumento inclusivo, utilizzabile da tutti, indipendentemente dalle capacità o disabilità. In linea con questa visione, progettiamo e sviluppiamo software che dà priorità all’accessibilità fin dall’inizio.
Per aiutare i nostri clienti a raggiungere la conformità in materia di accessibilità, offriamo un’Accessibility Audit che permette loro di rispondere alle esigenze di tutti gli utenti e di rispettare i requisiti di legge. Se vuoi saperne di più sull’audit, dai un’occhiata al nostro case study sul lavoro svolto con Gruppo San Donato.
Agnese is an Interaction Designer at Buildo, specialised in UI and Design Systems. She loves transforming complex interfaces into scalable systems, with an eye for accessibility.
Ogni mese scegliamo articoli utili ma anche idee fresche e stimolanti. Proprio quello che vorremmo trovare noi in una newsletter!
