Verificatore di Contrasto
Verifica se i colori del testo e dello sfondo soddisfano gli standard di accessibilita WCAG. Calcola il rapporto di contrasto per i livelli AA e AAA.
Funzionalita principali
- Calcolo del rapporto di contrasto in tempo reale
- Verifica di conformità WCAG 2.1 AA e AAA
- Supporto per standard di testo normale e grande
- Scambio colore e anteprima live
Guide
L'accessibilita del contrasto di colore determina se il testo sul tuo sito web e leggibile da tutti, comprese le persone con disabilita visive. Le Web Content Accessibility Guidelines (WCAG) definiscono specifici rapporti di contrasto che il testo deve soddisfare per essere considerato accessibile. Non rispettare questi standard significa che alcuni visitatori non possono leggere i tuoi contenuti e, in molte giurisdizioni, significa che il tuo sito non e conforme ai requisiti legali di accessibilita. Questa guida spiega come funzionano i rapporti di contrasto, cosa richiedono le WCAG e come risolvere i problemi di contrasto senza compromettere il tuo design. Un rapporto di contrasto confronta la luminanza relativa di due colori su una scala da 1:1 (nessun contrasto, entrambi i colori identici) a 21:1 (contrasto massimo, nero puro su bianco puro). La luminanza relativa e una misura di quanto luminoso appare un colore all'occhio umano, calcolata dai valori RGB del colore usando una formula che tiene conto di come la visione umana percepisce le diverse lunghezze d'onda. Rosso, verde e blu contribuiscono in modo diverso alla luminosita percepita, con il verde che contribuisce maggiormente e il blu meno di tutti. La formula e: L = 0,2126 * R + 0,7152 * G + 0,0722 * B, dove R, G e B sono linearizzati dai loro valori sRGB. Il passaggio di linearizzazione converte i valori sRGB codificati con gamma in valori di luce lineare applicando una funzione di trasferimento. Il rapporto di contrasto stesso e calcolato come (L1 + 0,05) / (L2 + 0,05), dove L1 e la luminanza relativa del colore piu chiaro e L2 e la luminanza relativa del colore piu scuro. Il valore 0,05 tiene conto della luce ambientale. Questa formula produce il familiare formato di rapporto. Ad esempio, il bianco puro ha una luminanza di 1,0 e il nero puro ha una luminanza di 0,0, dando un rapporto di contrasto di (1,0 + 0,05) / (0,0 + 0,05) = 21:1. Le WCAG definiscono due livelli di conformita per il contrasto. Il livello AA e il requisito di base per la maggior parte dei siti web. Il livello AAA e uno standard piu rigoroso che offre una migliore leggibilita. Per il testo di dimensioni normali (sotto i 18pt o sotto i 14pt in grassetto), il livello AA richiede un rapporto di contrasto di almeno 4,5:1 e il livello AAA richiede 7:1. Per il testo grande (18pt e oltre, oppure 14pt in grassetto e oltre), il livello AA richiede 3:1 e il livello AAA richiede 4,5:1. Queste soglie si basano su ricerche sulla leggibilita per le persone con ipovisione moderata, circa 20/40 di acuita, che e la tipica soglia di perdita della vista negli adulti piu anziani. L'eccezione per il testo grande esiste perche le lettere piu grandi sono intrinsecamente piu facili da leggere. A dimensioni maggiori, i tratti piu spessi e le controlettere piu ampie rendono i caratteri piu distinguibili anche a contrasto piu basso. Ecco perche titoli, testo hero e altro testo display di grandi dimensioni possono usare un rapporto di 3:1 in conformita AA mentre il testo del corpo richiede 4,5:1. In termini CSS, 18pt equivale a 24px con le impostazioni predefinite del browser e 14pt in grassetto equivale a circa 18,66px in grassetto. Se non sei sicuro che il tuo testo qualifichi come grande, applica il rapporto piu rigoroso di 4,5:1 per andare sul sicuro. Anche gli elementi non testuali hanno requisiti di contrasto secondo il criterio di successo 1.4.11 delle WCAG 2.1 (Contrasto non testuale). I componenti dell'interfaccia utente (pulsanti, input di modulo, indicatori di focus) e gli oggetti grafici (icone, elementi dei grafici) necessari per comprendere il contenuto devono avere un rapporto di contrasto di almeno 3:1 rispetto ai colori adiacenti. Un bordo del pulsante grigio chiaro su uno sfondo bianco che scende sotto 3:1 rende il pulsante difficile da identificare come elemento cliccabile, in particolare per gli utenti con ipovisione. Gli indicatori di focus sono particolarmente importanti: gli utenti da tastiera si affidano agli stili di focus visibili per navigare e quegli stili di focus devono soddisfare il rapporto di 3:1 rispetto al contenuto circostante. Il daltonismo colpisce circa l'8% degli uomini e lo 0,5% delle donne di origine nordeuropea, con prevalenza variabile in altre popolazioni. La forma piu comune e il daltonismo rosso-verde (deuteranopia e protanopia), in cui rossi e verdi appaiono simili. Il daltonismo blu-giallo (tritanopia) e meno comune. Il daltonismo completo (acromatopsia) e raro. I calcoli del rapporto di contrasto basati sulla luminanza funzionano indipendentemente dalla percezione del colore perche misurano la differenza di luminosita, non la differenza di tonalita. Tuttavia, affidarsi solo al colore per trasmettere informazioni (rosso per errore, verde per successo) crea problemi agli utenti daltonici indipendentemente dal rapporto di contrasto. Fornisci sempre ulteriori indizi visivi come icone, etichette di testo o pattern accanto alla codifica a colori. La modalita scura introduce ulteriori considerazioni sul contrasto. Molti designer creano temi scuri semplicemente invertendo i colori, ma cio produce spesso risultati scadenti. Il testo bianco puro (#FFFFFF) su sfondi neri puri (#000000) crea il contrasto massimo (21:1), ma questo livello di contrasto puo causare affaticamento visivo e alonamento (un effetto di bagliore attorno al testo chiaro su sfondi scuri) per alcuni utenti. Un contrasto leggermente ridotto, come #E0E0E0 su #121212, e piu confortevole pur superando i requisiti WCAG AAA. Le linee guida del tema scuro di Material Design di Google raccomandano di usare #121212 come colore di superficie e di ridurre l'opacita del testo anziche usare il bianco puro. Il testo principale usa un'opacita dell'87%, il testo secondaria del 60% e il testo disabilitato del 38%. I colori semitrasparenti complicano il controllo del contrasto. Quando usi colori rgba() o hsla() con valori alpha inferiori a 1, il colore effettivamente riprodotto dipende da cio che c'e dietro. Il testo bianco al 70% di opacita su uno sfondo scuro ha un contrasto effettivo diverso dallo stesso testo su uno sfondo chiaro. Quando controlli il contrasto per testo semitrasparente, devi calcolare il colore composto (il colore effettivo che l'utente vede dopo che la trasparenza e stata applicata sullo sfondo). La formula fonde il primo piano e lo sfondo in base al valore alpha: composto = primopiano * alpha + sfondo * (1 - alpha), applicato a ciascun canale. Controlla sempre il risultato composto, non il colore trasparente isolato. Gli sfondi sfumati creano contrasto variabile nell'area del testo. Se il testo si trova su un gradiente che passa dal blu scuro al blu chiaro, il rapporto di contrasto differisce sui bordi sinistro e destro del testo. Le WCAG richiedono che il rapporto di contrasto sia rispettato in ogni punto in cui appare il testo. Controlla il contrasto nel punto piu debole, ovvero dove lo sfondo e piu vicino in luminanza al colore del testo. Se il gradiente va da #003366 a #6699CC e il tuo testo e bianco, controlla il contrasto contro #6699CC perche e dove sara piu basso. Per i gradienti radiali, controlla piu punti attraverso l'area del testo. Gli sfondi immagine presentano la sfida di contrasto piu difficile. Il testo su fotografie o sfondi con pattern avra contrasto diverso a ogni pixel. Le soluzioni sono: posizionare una sovrapposizione solida o semitrasparente tra l'immagine e il testo, usare un'ombra del testo o un contorno per garantire la leggibilita o limitare il testo ad aree dell'immagine con colore coerente. Un pattern comune e una sovrapposizione a gradiente scuro nella parte inferiore di un'immagine hero dove appare il testo. Il gradiente scurisce l'immagine a sufficienza per creare un contrasto adeguato con il testo bianco. Per le sovrapposizioni, rgba(0, 0, 0, 0,5) in genere porta la maggior parte delle immagini in conformita WCAG AA con testo bianco, ma verifica con le tue immagini specifiche. Gli spazi colore e i calcoli del contrasto sono piu complessi di quanto ammettano la maggior parte degli strumenti. La formula di contrasto WCAG standard usa la luminanza relativa nello spazio colore sRGB. Questa formula ha limitazioni note. Puo sovrastimare il contrasto di coppie di colori molto scure e sottostimare il contrasto di coppie di colori chiare. Le ricerche hanno dimostrato che un testo blu scuro (#00007E) su sfondo nero supera tecnicamente la WCAG AA ma e estremamente difficile da leggere nella pratica. L'APCA (Advanced Perceptual Contrast Algorithm) e un approccio piu recente sviluppato per le WCAG 3.0 che tiene conto della percezione visiva umana in modo piu accurato, incluso l'effetto di polarita (il testo scuro su sfondi chiari e percepito in modo diverso rispetto al testo chiaro su sfondi scuri). Sebbene le WCAG 2.x e la loro formula basata su sRGB rimangano l'attuale standard legale, APCA fornisce una valutazione percettivamente piu accurata. Il modello APCA assegna requisiti di contrasto diversi in base alle dimensioni e al peso del font, creando una matrice di valori minimi di contrasto anziche l'approccio a soglia binaria delle WCAG 2.x. Ad esempio, il testo da 14px a peso normale ha bisogno di un valore di contrasto APCA piu alto rispetto al testo da 24px in grassetto. APCA gestisce anche il problema della polarita: il testo chiaro su sfondi scuri richiede valori di contrasto diversi rispetto al testo scuro su sfondi chiari. Sebbene APCA non sia ancora lo standard ufficiale, comprenderlo ti aiuta a prendere decisioni di contrasto migliori, specialmente nei casi limite in cui le WCAG 2.x producono risultati discutibili. La correzione delle non conformita di contrasto comporta in genere uno di tre approcci: scurire il testo, schiarire lo sfondo o entrambi. Quando regoli i colori, rimani all'interno della palette del tuo marchio modificando il valore di luminosita nello spazio colore HSL anziche cambiare la tonalita o la saturazione. Se il blu del tuo marchio e hsl(210, 80%, 55%) e non supera il contrasto rispetto al bianco, ridurre la luminosita a hsl(210, 80%, 40%) potrebbe superarlo pur rimanendo riconoscibilmente il blu del tuo marchio. Piccole regolazioni di luminosita spesso risolvono i problemi di contrasto senza richiedere un restyling completo. Nello spazio colore OKLCH, queste regolazioni producono risultati ancora piu uniformi dal punto di vista percettivo. Le custom property CSS rendono pratico il tematizzazione sensibile al contrasto. Definisci i tuoi colori come valori HSL nelle custom property, poi crea varianti del tema chiaro e scuro che soddisfano i requisiti di contrasto. Ad esempio: --brand-primary: hsl(210, 80%, 40%) per il tema chiaro e --brand-primary: hsl(210, 80%, 70%) per il tema scuro. Entrambi usano la stessa tonalita e saturazione ma valori di luminosita diversi ottimizzati per i rispettivi sfondi. Questo approccio si scala a interi design system con decine di token di colore. Mantieni la coerenza del marchio rispettando i requisiti di accessibilita in ogni tema. L'integrazione nel design system e dove il controllo del contrasto diventa piu prezioso. Invece di controllare i singoli elementi della pagina, definisci i tuoi token di colore e verifica che ogni combinazione di testo su sfondo nel tuo sistema di token superi i requisiti WCAG. Documenta le combinazioni approvate in una matrice di contrasto che mostra quali colori di testo sono sicuri su quali colori di sfondo. Quindi, quando gli sviluppatori creano componenti, selezionano da coppie di colori pre-approvate e la conformita al contrasto e garantita dal sistema anziche verificata per istanza. E cosi che grandi organizzazioni come Google, Microsoft e Adobe gestiscono il contrasto su larga scala. La creazione di una matrice di contrasto consiste nell'elencare tutti i colori di sfondo in alto e tutti i colori di testo a lato, quindi calcolare il rapporto di contrasto per ogni intersezione. Contrassegna ogni cella come superato AA, superato AAA o non superato. Questa matrice diventa un documento di riferimento per l'intero team. Quando un designer specifica una combinazione di colori, puo consultare la matrice istantaneamente. Quando uno sviluppatore implementa un componente, la matrice gli dice quali token di colore sono sicuri da usare insieme. I test automatizzati individuano precocemente i problemi di contrasto. Strumenti come axe-core, Lighthouse e Pa11y analizzano le pagine riprodotte e segnalano gli elementi che non soddisfano i requisiti di contrasto WCAG. Integrali nel tuo flusso CI/CD in modo che le regressioni di contrasto vengano rilevate prima del deployment. Il limite degli strumenti automatizzati e che non possono valutare il testo su immagini, gradienti o sfondi che cambiano dinamicamente. Il controllo manuale con uno strumento di verifica del contrasto rimane necessario per questi casi. Un approccio completo usa test automatizzati per la maggior parte dei casi e controllo manuale per i casi limite che l'automazione non puo gestire. La conformita legale determina gran parte dell'urgenza attorno all'accessibilita del contrasto. L'Americans with Disabilities Act (ADA) negli Stati Uniti, l'European Accessibility Act nell'UE, l'Accessibility for Ontarians with Disabilities Act in Canada e leggi simili in altre giurisdizioni richiedono direttamente la conformita WCAG oppure sono state interpretate dai tribunali come tali. Le cause legali sull'accessibilita web sono aumentate significativamente di anno in anno, con le non conformita di contrasto tra i problemi piu comunemente citati. Soddisfare la WCAG AA e lo standard legale ampiamente accettato. Le organizzazioni nei settori regolamentati (governo, sanita, istruzione, finanza) affrontano requisiti piu rigorosi e un'applicazione piu attiva. Oltre alla conformita legale, un buon contrasto e un buon design. Il testo facile da leggere converte meglio, trattiene i visitatori piu a lungo e riduce i tassi di rimbalzo. Gli utenti che leggono sui telefoni alla luce solare intensa, gli utenti piu anziani con vista naturalmente in declino, gli utenti su monitor di bassa qualita con riproduzione scadente dei colori e gli utenti semplicemente stanchi beneficiano tutti di un forte contrasto. Progettare per i limiti delle capacita umane (ipovisione, ambienti difficili) produce design che funzionano meglio anche per chiunque altro al centro. Gli studi hanno dimostrato che il testo a contrasto piu elevato riduce il tempo di lettura e migliora la comprensione in tutti gli utenti, non solo in quelli con disabilita visive. Testare le tue scelte di contrasto in condizioni reali significa verificare su piu dispositivi, in varie condizioni di illuminazione e con contenuti effettivi anziche con testo segnaposto. Una coppia di colori che supera il controllo matematico di contrasto potrebbe comunque essere difficile da leggere se il font e sottile, il testo e piccolo o la spaziatura tra le lettere e ridotta. Il rapporto di contrasto e un minimo necessario, non una garanzia di leggibilita. Abbina un contrasto adeguato a una dimensione del font appropriata (minimo 16px per il corpo del testo), peso (regular o medium, non light o thin) e spaziatura (interlinea di 1,5 o piu) per i migliori risultati. Le insidie comuni sul contrasto includono il testo segnaposto negli input di modulo (spesso grigio chiaro su bianco, che non supera i requisiti di contrasto), il testo dei pulsanti disabilitati (che deve comunque essere distinguibile, anche se non soddisfa i requisiti completi di contrasto), il testo dei link che si affida solo al colore per distinguerlo dal testo circostante (le WCAG richiedono un ulteriore indicatore visivo come la sottolineatura a meno che il contrasto del link rispetto al testo circostante non sia di almeno 3:1) e il testo su sfondi decorativi dove il contrasto varia in base alla posizione. L'accessibilita dei colori del marchio e una sfida frequente. I team di marketing scelgono i colori del marchio per l'impatto emotivo e l'attrattiva visiva, non per la conformita WCAG. Un colore del marchio arancione brillante (hsl(30, 100%, 50%)) ha un rapporto di contrasto di soli 2,14:1 rispetto al bianco, ben al di sotto del requisito AA di 4,5:1 per il testo normale. La soluzione e creare varianti accessibili dei colori del marchio. Mantieni la tonalita, regola la luminosita. hsl(30, 100%, 35%) e ancora riconoscibilmente arancione ma supera AA rispetto al bianco a 4,6:1. Crea una palette di colori del marchio con colori primari per testo di grandi dimensioni ed elementi decorativi (contrasto inferiore accettabile) e varianti regolate per corpo del testo, link e componenti UI (devono superare AA). La visualizzazione dei dati e i grafici presentano sfide di contrasto uniche. Ogni serie di dati in un grafico deve essere distinguibile dalle serie adiacenti e dallo sfondo. Con cinque o piu serie di dati, trovare colori che abbiano tutti un contrasto sufficiente tra loro e con lo sfondo e difficile. Le palette sicure per daltonici (come quelle di ColorBrewer o la palette Okabe-Ito) sono progettate specificamente per questo scopo. Oltre al colore, usa pattern, texture o etichette dirette per distinguere le serie di dati. I grafici a linee possono usare diversi motivi di tratteggio. I grafici a barre possono usare tratteggi diagonali. Gli scatter plot possono usare forme diverse. Il contrasto in diversi ambienti di illuminazione varia drasticamente. Una coppia di colori comodamente leggibile in un ufficio in penombra diventa a malapena visibile alla luce solare diretta. Gli utenti mobili incontrano spesso condizioni esterne luminose. I rapporti di contrasto elevati forniscono un margine contro i fattori ambientali. Una coppia a esattamente 4,5:1 (il minimo AA) e leggibile in condizioni controllate ma puo non superare il test alla luce solare intensa. Puntare a 5:1 o 6:1 fornisce un margine che tiene conto delle condizioni di visione reali. Per gli elementi UI critici (navigazione, call to action, messaggi di errore), propendi per un contrasto piu elevato. La gestione del colore e le differenze tra dispositivi influenzano come gli utenti percepiscono il contrasto. Un colore sRGB su uno schermo a gamma ampia (P3 o Adobe RGB) puo apparire leggermente diverso da quanto previsto. I monitor economici con pannelli TN mostrano i colori in modo diverso rispetto agli schermi IPS o OLED. Le impostazioni di luminosita dello schermo cambiano il contrasto percepito. I filtri per la luce blu e la modalita notturna tingono lo schermo di caldo, riducendo il contrasto percepito dei colori freddi. Nessuno di questi fattori modifica il rapporto WCAG calcolato, ma influenzano l'esperienza visiva effettiva. I test su piu dispositivi e in piu condizioni rilevano problemi che i calcoli matematici mancano. I requisiti di contrasto per il testo incorporato nelle immagini sono gli stessi del testo live. Se la tua immagine hero contiene testo integrato nel file di immagine (non testo HTML), quel testo deve comunque soddisfare i requisiti di contrasto WCAG. La differenza e che non puoi regolare il testo dell'immagine con CSS, quindi il contrasto deve essere verificato nello strumento di modifica dell'immagine prima dell'esportazione. Le immagini di anteprima dei social media (og:image) spesso contengono testo che dovrebbe essere leggibile, sebbene non siano formalmente coperti dalle WCAG poiche appaiono su piattaforme di terze parti. Il contrasto nella tipografia va oltre i soli colori di primo piano e sfondo. Il contrasto percepito del testo dipende dal peso del font, dalla dimensione del font, dalla spaziatura tra lettere e dall'interlinea. I font sottili (peso 300 e inferiore) hanno bisogno di rapporti di contrasto piu elevati rispetto allo stesso testo in peso regular o bold perche i tratti piu sottili sono piu difficili da distinguere dallo sfondo. La specifica WCAG non tiene conto del peso del font nelle sue soglie (solo delle dimensioni), quindi un rapporto tecnicamente superato puo comunque produrre testo illeggibile se il font e troppo sottile. Per il corpo del testo, usa almeno il peso regular (400) o medium (500). Riserva i pesi light e thin per i titoli grandi dove le dimensioni compensano la ridotta visibilita del tratto. Un audit sistematico del contrasto su un sito web di grandi dimensioni richiede una combinazione di strumenti automatizzati e revisione manuale. Esegui scansioni automatizzate (axe-core, Lighthouse) per cogliere i frutti piu bassi: colori hardcoded che non superano i rapporti. Quindi revisiona manualmente il contenuto dinamico, le aree con contenuto generato dagli utenti, gli stati interattivi (hover, focus, active, disabled), i messaggi di errore e successo, il testo dei tooltip e qualsiasi area in cui il colore e determinato a runtime. Crea una pianificazione ricorrente degli audit: trimestrale per i siti di grandi dimensioni, mensile durante lo sviluppo attivo. Monitora nel tempo il numero di problemi di contrasto per misurare i progressi. Lo strumento di verifica del contrasto ti consente di inserire due colori qualsiasi e vedere istantaneamente il rapporto di contrasto, lo stato di superato/non superato delle WCAG AA e AAA sia per il testo normale sia per quello grande e un'anteprima visiva della combinazione. Usalo durante la fase di design per convalidare le scelte di colore prima che arrivino allo sviluppo, durante la revisione del codice per verificare che i colori implementati corrispondano al design e durante gli audit di accessibilita per identificare e correggere i problemi esistenti. Lo strumento accetta valori di colore hex, RGB e HSL e mostra la luminanza calcolata per ciascun colore accanto al rapporto.
Domande frequenti
Quale rapporto di contrasto serve per WCAG AA?
WCAG AA richiede un rapporto di contrasto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande (18px+ o 14px+ grassetto).
Qual è la differenza tra AA e AAA?
AAA è più stringente: 7:1 per il testo normale e 4,5:1 per il testo grande. AA è lo standard minimo raccomandato.
