Contrasto cromatico e WCAG: qual è il requisito e come si misura?

Risposta breve. Il livello WCAG AA richiede un rapporto di contrasto di almeno 4,5:1 tra testo e sfondo per il testo normale, e 3:1 per il testo grande e gli elementi grafici (icone, bordi dei campi di input). Il contrasto insufficiente è di gran lunga l'errore di accessibilità più comune negli e-commerce — e per fortuna spesso risolvibile in un colpo solo a livello di tema. È inoltre misurabile in modo esatto al 100% con un software, quindi non c'è nulla su cui discutere.

Perché il contrasto è così importante?

Il testo grigio chiaro su bianco sembra elegante sul tuo schermo, ma è difficile da leggere per chi ci vede poco, per i visitatori più anziani e per chiunque guardi uno smartphone sotto il sole forte. Una buona parte dei tuoi clienti rientra in almeno uno di questi gruppi. Un contrasto scadente ti costa quindi letteralmente leggibilità — e con essa vendite.

Quali sono i requisiti esatti di contrasto WCAG?

Lo standard distingue per dimensione del testo e tipo di elemento. Più piccoli sono i caratteri, più netto deve essere il contrasto:

• Testo normale (più piccolo di 24px, o 18,66px in grassetto): almeno 4,5:1.
• Testo grande (da 24px, o 18,66px in grassetto — ovvero 18pt / 14pt bold): almeno 3:1.
• Componenti grafici (icone, bordi dei campi di input, bordi dei pulsanti attivi): almeno 3:1 rispetto ai colori adiacenti (WCAG 1.4.11).

Il contrasto si esprime come un rapporto: 1:1 è assenza di contrasto, 21:1 è nero puro su bianco. Alcune combinazioni comuni:

Come misuri il contrasto da solo?

Non devi tirare a indovinare, né metterti a fare formule. Ci sono tre modi affidabili:

1. Una scansione automatizzata (consigliata). Strumenti come Seviranta calcolano il valore di contrasto di ogni elemento di testo sulla pagina in un colpo solo e segnalano la riga di codice esatta dei trasgressori — incluso il valore misurato accanto a quello richiesto.
2. Gli strumenti per sviluppatori del tuo browser. In Chrome o Edge clicca col tasto destro sul testo → "Ispeziona"; il selettore di colore mostra spesso direttamente il rapporto di contrasto e lo stato WCAG.
3. Un contrast checker manuale. Inserisci i due codici Hex e ottieni il rapporto. Comodo in fase di design, ma dispendioso in tempo per un intero sito in produzione.

Come risolvi gli errori di contrasto in modo efficiente?

Il bello degli errori di contrasto: sono quasi sempre gestiti in modo centralizzato. In Shopify, WooCommerce o Magento i colori sono collegati a variabili globali nel tuo tema. Rendi il colore del testo o dello sfondo una tonalità più scuro o più chiaro finché il rapporto non è corretto, e soddisfi in un colpo solo per tutto il tuo e-commerce il requisito di contrasto.

Parti dal tuo funnel di conversione: il testo sui pulsanti "Aggiungi al carrello" e "Checkout", le tue etichette di prezzo, le voci di menu e gli avvisi al checkout. È lì che c'è il guadagno maggiore. Questo è del resto uno dei 10 errori di accessibilità più comuni.

Perché un widget di accessibilità non risolve questo?

Molti imprenditori sperano di sistemare il contrasto con un widget overlay e il suo "pulsante alto contrasto". Tecnicamente e legalmente è insufficiente: le autorità di vigilanza e gli scraper IA controllano lo stato predefinito del tuo codice sorgente. Se il tuo CSS non soddisfa il 4,5:1, non sei conforme — uno strato JavaScript temporaneo non cambia questo. Perché un widget overlay non ti protegge approfondisce il tema. L'unica via sostenibile è modificare i colori nel tuo tema.

Cosa cambia con le WCAG 3.0 (APCA)?

Nelle prossime linee guida WCAG 3.0 l'attuale formula matematica del contrasto verrà sostituita da APCA (Advanced Perceptual Contrast Algorithm). APCA si allinea meglio a come l'occhio umano percepisce davvero il contrasto — tiene conto di carattere, spessore e contesto, invece della pura luminosità di due colori. Se ora imposti il tuo sito in modo netto sul requisito 4,5:1 delle WCAG 2.1/2.2, sarai ben preparato anche a quella transizione.

Vedi a che punto è il tuo sito

Curioso di sapere quali colori sul tuo sito non sono ancora conformi? Scansiona gratis una pagina. Vedrai per ogni punto il rapporto di contrasto misurato accanto a quello richiesto, con i colori reali del tuo sito — in meno di 60 secondi, senza account.