Contrasto dei colori per WCAG 2.2 AA: Una guida pratica per i creatori di corsi

Il contrasto dei colori è il fallimento di accessibilità più comune sul web — anno dopo anno, i sondaggi automatizzati delle prime milioni di homepage trovano testo a basso contrasto in più di quattro su cinque di esse — ed è anche uno dei problemi più facili da risolvere. Per i creatori di corsi, ottenere il contrasto corretto significa che gli studenti con visione ridotta, le persone con deficit di visione dei colori (circa 1 su 12 uomini) e chiunque legga su uno schermo di telefono abbagliante alla luce solare può effettivamente leggere il tuo contenuto. Questa guida spiega i requisiti di contrasto WCAG 2.2 AA in linguaggio semplice — i rapporti 4.5:1 e 3:1, cosa conta come testo "grande", e le regole frequentemente dimenticate per pulsanti, icone e grafici — quindi ti mostra esattamente come misurare il contrasto e risolvere i fallimenti senza abbandonare il tuo marchio.

Cosa misura effettivamente il rapporto di contrasto

Un rapporto di contrasto è un numero che descrive la differenza in luminanza relativa (luminosità percepita) tra due colori — tipicamente il testo e lo sfondo dietro di esso. Va da 1:1 (identico, invisibile) a 21:1 (nero puro su bianco puro). Non riguarda il tono: due colori possono sembrare molto diversi e avere comunque un contrasto scarso se sono simili in luminosità (pensa a un testo blu medio su uno sfondo verde medio).

Questo è il motivo per cui non puoi valutarlo a occhio in modo affidabile. Un colore che sembra a posto su un monitor calibrato in un ufficio poco illuminato potrebbe essere illeggibile per uno studente con visione ridotta su un telefono economico all'aperto. WCAG trasforma il giudizio in una soglia misurabile, quindi è testabile e oggettivo.

I rapporti di contrasto di cui hai effettivamente bisogno

Per il livello AA, queste sono le soglie da raggiungere:

• 4.5:1 — minimo per il testo normale (WCAG 1.4.3).
• 3:1 — minimo per testo grande, definito come 18.66px in grassetto o 24px regolare e oltre (circa 14pt in grassetto / 18pt regolare).
• 3:1 — minimo per contrasto non testuale (WCAG 1.4.11): le parti significative dei componenti UI come i bordi di input, gli stati di attivazione e le forme essenziali delle icone, oltre alle grafiche necessarie per comprendere il contenuto.

Il livello AAA aumenta il testo normale a 7:1, il che è un obiettivo da perseguire nella lettura di testi lunghi ed è facilmente raggiungibile con testo quasi nero su bianco. Ma AA è la base legale, e soddisfarla costantemente in tutto un corso è l'obiettivo realistico. Nota che i loghi e gli elementi puramente decorativi sono esenti — le regole mirano ai contenuti che gli studenti devono leggere o utilizzare.

Gli errori di contrasto che i creatori di corsi fanno di più

Quasi tutti i fallimenti si concentrano attorno a un pugno di schemi, e una volta che li conosci, li noterai ovunque:

• Testo grigio chiaro su bianco — elegante in un mockup, illeggibile per molti. Le didascalie grigio su grigio e i metadati deboli sono colpevoli frequenti.
• Pulsanti di colore del marchio con testo bianco, dove il colore del marchio è troppo chiaro per raggiungere 4.5:1 — estremamente comune con palette di colori pastello o neon.
• Testo su immagini o video senza scrim o sovrapposizione, quindi il contrasto cambia con ogni fotogramma e fallisce da qualche parte.
• Testo segnaposto usato come etichette — di solito troppo debole, e scompare una volta che il campo è compilato.
• Significato solo attraverso il colore — "clicca sul pulsante verde" o pass/fail rosso/verde senza icona o testo, che fallisce anche WCAG 1.4.1 (uso del colore).
• Grafici a basso contrasto dove i segmenti adiacenti sono indistinguibili, specialmente per gli spettatori daltonici — aggiungi etichette o pattern.

Come misurare il contrasto

Non devi mai indovinare. Usa uno di questi strumenti gratuiti:

• Browser DevTools — Chrome e Firefox mostrano il rapporto di contrasto direttamente nel selettore di colori e nell'ispezione dell'accessibilità, inclusa una linea di pass/fail.
• WebAIM Contrast Checker — incolla due valori esadecimali e ottieni il rapporto esatto più pass/fail per AA e AAA, testo normale e grande.
• axe-core / Lighthouse — le scansioni automatiche segnalano ogni fallimento di contrasto su un'intera pagina in una sola volta, il che è ideale per l'audit di un corso esistente.
• Simulatori di daltonismo — visualizza la tua palette sotto deuteranopia, protanopia e tritanopia per catturare grafici e colori di stato che collassano.

Rendi il contrasto un passo di routine nel tuo audit del corso piuttosto che una sorpresa dell'ultimo giorno — è molto più economico risolvere un token che ricompilare 40 lezioni.

Come risolvere il contrasto senza rovinare il tuo marchio

Il contrasto e un buon design non sono in conflitto; hai solo bisogno di un sistema invece di ritocchi occasionali:

• Scurire il testo, non l'intera palette. Una tonalità leggermente più scura del tuo colore di marca, usata specificamente per il testo, spesso passa rimanendo riconoscibilmente in linea con il marchio.
• Riserva le tonalità chiare del marchio per sfondi e accenti, mai per testo normale o icone critiche.
• Aggiungi uno scrim o una sovrapposizione dietro il testo su immagini in modo che il rapporto sia stabile indipendentemente dalla foto.
• Abbina colore con forma, icona o testo in modo che il significato non dipenda mai solo dal colore.
• Definisci i token di colore accessibili una volta — un sistema di design controllato per il contrasto (colore del testo, colore del pulsante, colore del link, colore di messa a fuoco) significa che ogni nuova lezione inizia conforme e nessun creatore deve ripetere il test.
• Tieni a mente una variante in modalità scura e ad alto contrasto, poiché gli stessi token devono passare su entrambi gli sfondi.

Un cambiamento di mentalità rende tutto questo più facile: smettila di pensare al contrasto come a una decisione per elemento e inizia a pensarlo come a una proprietà del tuo sistema di design. Un marchio ha dozzine di possibili accoppiamenti di colore, ma un corso ha bisogno solo di un pugno — testo normale, intestazioni, link, pulsanti, bordi, messa a fuoco e un paio di accenti. Definisci questi una volta, prova ciascuno a superare il test, e la domanda "questo supera il contrasto?" è già risposta prima che venga scritta qualsiasi lezione. I creatori che utilizzano i tuoi modelli non devono mai pensare ai rapporti, ed è esattamente come dovrebbe essere: accessibilità che è invisibile per le persone che producono contenuti perché è integrata negli strumenti da cui partono.

Contrasto in modalità scura, su video e nei grafici

Tre contesti meritano un'attenzione speciale perché una palette che passa in uno può fallire in un altro. La modalità scura inverte il problema: ora hai bisogno di testo chiaro su sfondi scuri per raggiungere 4.5:1, e il bianco puro su nero puro può effettivamente essere sgradevole — un bianco sporco leggermente ammorbidito è sia più confortevole che ancora conforme. Se offri temi chiari e scuri, ogni token deve passare su entrambi.

Testo su video o immagini è il caso più difficile perché lo sfondo cambia costantemente. Non puoi garantire il contrasto contro un fotogramma sconosciuto, quindi aggiungi uno scrim semi-opaco dietro il testo, o posiziona il testo in un pannello solido. Il testo delle didascalie dovrebbe specificamente trovarsi su uno sfondo solido o semi-opaco in modo che sia leggibile su qualsiasi scena.

Grafici e visualizzazione dei dati falliscono in un modo diverso: segmenti adiacenti che sono distinti nel colore ma simili nella luminosità diventano indistinguibili per gli spettatori daltonici, e una legenda che si basa puramente sul colore fallisce 1.4.1. Risolvilo aggiungendo etichette dirette, pattern o texture, assicurando 3:1 tra aree significative adiacenti, e testando il grafico attraverso un simulatore di daltonismo.

Costruisci un sistema di colori accessibile in cinque passaggi

La soluzione durevole per il contrasto è un piccolo sistema di colori testato piuttosto che ritocchi per pagina. Ecco una sequenza pratica:

1. Scegli un colore di testo che superi il test sul tuo sfondo principale. Inizia vicino al nero su bianco (o vicino al bianco sul tuo sfondo scuro) e schiarisci/scurisci solo fino a quando non sei comodamente oltre 4.5:1.
2. Deriva una tonalità di "testo del marchio" accessibile. Se il tuo colore di marca è troppo chiaro per il testo, definisci una variante più scura usata specificamente per link e enfasi che legga ancora come il tuo marchio.
3. Definisci i token dei pulsanti. Scegli uno sfondo del pulsante sufficientemente scuro affinché il testo dell'etichetta bianca (o scura) raggiunga 4.5:1, e un colore di messa a fuoco chiaramente visibile che soddisfi 3:1 rispetto ai colori adiacenti.
4. Imposta un token UI/bordo a 3:1. I bordi di input, i toggle e le forme delle icone necessitano di contrasto non testuale (1.4.11), quindi non lasciarli svanire nello sfondo.
5. Testa l'intero set una volta, poi riutilizzalo. Esegui ogni coppia di token attraverso un controllore di contrasto, salva i valori e costruisci tutte le lezioni da essi. I nuovi contenuti sono quindi conformi per costruzione.

Punta a AA ovunque e AAA (7:1) su testo normale lungo dove puoi — costa poco con testo quasi nero e migliora notevolmente la leggibilità per tutti.

Un flusso di lavoro di test del contrasto efficiente

Controllare il contrasto colore per colore non scala a un corso con dozzine di lezioni. Un flusso di lavoro più veloce testa il sistema una volta e poi controlla il contenuto:

1. Audita i token di design, non ogni pagina. Se i tuoi colori di testo, link, pulsante, bordo e messa a fuoco superano il test rispetto ai tuoi sfondi, la stragrande maggioranza dei tuoi contenuti supera automaticamente.
2. Esegui una scansione automatizzata dell'intera pagina con axe-core o Lighthouse su una lezione rappresentativa, un quiz e il dashboard — questi evidenziano i fallimenti di contrasto in blocco con gli elementi esatti nominati.
3. Controlla a campione i tipi di contenuto rischiosi a mano: testo su immagini, grafici, badge e pillole di stato, e qualsiasi colore scelto dal creatore.
4. Simula il daltonismo su qualsiasi cosa utilizzi il colore per trasmettere significato.
5. Ritesta solo ciò che cambia. Poiché i token sono fissi, devi principalmente controllare i nuovi colori personalizzati, non l'intera libreria di nuovo.

Incorpora questo nella tua lista di controllo per la pubblicazione in modo che il contrasto venga verificato prima che una lezione venga pubblicata, non dopo che uno studente si lamenta. Il costo della prevenzione è di pochi minuti; il costo della rimediabilità è la ricompilazione di un intero corso.

Riferimento rapido: rapporti, controlli e correzioni

Tieni a portata di mano questo riepilogo ogni volta che scegli un colore o rivedi una lezione:

• Testo normale: almeno 4.5:1 (AA). Punta a 7:1 (AAA) nella lettura di testi lunghi dove puoi.
• Testo grande (24px regolare / 18.66px in grassetto): almeno 3:1.
• Componenti UI e forme significative di icone/grafiche: almeno 3:1 (contrasto non testuale).
• Loghi ed elementi decorativi: esenti.
• Non fare mai affidamento solo sul colore: abbinalo a testo, un'icona o un pattern.
• Misura, non indovinare: WebAIM Contrast Checker, selettore di colori del browser DevTools, o axe-core/Lighthouse per scansioni di intere pagine.
• Correggi a livello di token: scurire le tonalità del testo, riservare le tonalità chiare per gli sfondi, aggiungere scrim dietro il testo su immagini e testare il sistema una volta.

Quando vale la pena l'AAA per lo sforzo extra? Su letture dense e lunghe — documentazione, trascrizioni, lezioni lunghe — dove il rapporto più alto di 7:1 riduce misurabilmente l'affaticamento degli occhi per tutti ed è facile da raggiungere con testo quasi nero su bianco. Per pulsanti, etichette e testo UI breve, un solido AA è l'obiettivo pragmatico. In ogni caso, decidere una volta a livello di sistema di design significa che ogni creatore eredita un colore accessibile senza pensarci.

Come Eduspera gestisce il contrasto per te

Eduspera fornisce temi controllati per il contrasto, quindi il testo predefinito, i pulsanti e i componenti soddisfano già WCAG 2.2 AA — e un controllo di contrasto integrato avverte i proprietari delle accademie quando un colore di marca scelto fallirebbe contro il bianco, suggerendo un'alternativa accessibile prima che raggiunga mai uno studente. Gli studenti ottengono anche una modalità ad alto contrasto all'interno degli strumenti di lettura della piattaforma. Il risultato: i creatori ottengono corsi in linea con il marchio che rimangono leggibili, senza testare manualmente ogni combinazione di colori.

È tutto parte di una piattaforma orientata all'accessibilità testata contro WCAG 2.2 AA, con un prezzo di circa la metà delle grandi piattaforme, con migrazione gratuita. Inizia gratis o leggi cosa rende un LMS veramente conforme.

Domande frequenti

Qual è il contrasto minimo dei colori per WCAG 2.2 AA?

Per il testo normale il minimo è 4.5:1. Per il testo grande (18.66px in grassetto o 24px regolare e oltre) è 3:1. I componenti UI e le grafiche significative necessitano anche di almeno 3:1 (contrasto non testuale, WCAG 1.4.11). Il livello AAA aumenta il testo normale a 7:1.

Cosa conta come "testo grande" secondo WCAG?

Testo che è almeno 24px (circa 18pt) regolare, o 18.66px (circa 14pt) in grassetto. Il testo grande ha solo bisogno di un rapporto di contrasto di 3:1 invece del 4.5:1 richiesto per il testo normale.

Come posso controllare il rapporto di contrasto di due colori?

Usa il WebAIM Contrast Checker, il selettore di colori del tuo browser DevTools, o una scansione automatizzata con axe-core o Lighthouse. Incolla i tuoi colori di primo piano e sfondo per vedere il rapporto esatto e se supera AA e AAA per testo normale e grande.

Il contrasto dei colori si applica anche a pulsanti e icone?

Sì. WCAG 1.4.11 richiede almeno 3:1 di contrasto per le parti significative dei componenti UI (come i bordi di input e le forme essenziali delle icone) e per le grafiche necessarie per comprendere il contenuto — non solo per il testo. I loghi e gli elementi puramente decorativi sono esenti.

Eduspera controlla automaticamente il contrasto dei colori?

Sì. Eduspera fornisce temi controllati per il contrasto che soddisfano WCAG 2.2 AA per impostazione predefinita e avverte i proprietari delle accademie se un colore di marca scelto fallisce contro il bianco, suggerendo un'alternativa accessibile — oltre a una modalità di lettura ad alto contrasto per gli studenti.