Verifica Contrasto Colori
Disponibile in: English, Español, Deutsch, Français, Ελληνικά, Nederlands, Italiano
Informazioni su questo strumento
La verifica del contrasto dei colori è il processo di misurazione della differenza di luminanza tra i colori di primo piano e sfondo per determinare se il testo rimane leggibile per tutti gli utenti, compresi quelli con disabilità visive. Le Web Content Accessibility Guidelines (WCAG), sviluppate dal World Wide Web Consortium (W3C), stabiliscono lo standard internazionale per l'accessibilità digitale e definiscono soglie di contrasto specifiche che ogni sito web e applicazione dovrebbe rispettare. Le WCAG 2.2 specificano due livelli di conformità per il contrasto. Il Livello AA, lo standard minimo richiesto dalla maggior parte delle leggi sull'accessibilità, richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande (18pt normale o 14pt grassetto). Il Livello AAA, lo standard avanzato raccomandato per contenuti governativi, sanitari ed educativi, richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Queste soglie si basano su ricerche su come le persone con ipovisione moderata percepiscono i contenuti sullo schermo. L'accessibilità è anche un obbligo legale in molte giurisdizioni. L'Americans with Disabilities Act (ADA) negli Stati Uniti, la Section 508 del Rehabilitation Act e lo standard europeo EN 301 549 impongono tutti che i contenuti digitali siano percepibili dalle persone con disabilità. La non conformità può comportare cause legali, sanzioni e l'esclusione di una parte significativa del proprio pubblico. Questo strumento calcola i rapporti di contrasto convertendo i valori sRGB in RGB lineare, calcolando la luminanza relativa di ogni colore con i coefficienti ITU-R BT.709 e applicando la formula WCAG (L1 + 0,05) / (L2 + 0,05). Include anche la simulazione del daltonismo per protanopia, deuteranopia e tritanopia, aiutando i designer a verificare che le loro scelte cromatiche funzionino per i circa 300 milioni di persone con deficit della visione dei colori. Tutti i calcoli vengono eseguiti localmente nel browser.
Come usare
- Inserire i colori del testo (primo piano) e dello sfondo usando i selettori di colore o digitando codici HEX.
- Controllare il rapporto di contrasto e i risultati di conformità WCAG. Verde indica superato, rosso indica non superato.
- Usare la simulazione di daltonismo per verificare che i propri colori funzionino per utenti con disabilità visive.
Metodologia
Il calcolo del rapporto di contrasto segue l'algoritmo WCAG 2.2 con precisione. Prima, il codice esadecimale di ogni colore viene scomposto nei componenti rosso, verde e blu, che vengono poi normalizzati a valori tra 0 e 1 dividendo per 255. Questi valori lineari subiscono una correzione gamma usando la funzione di trasferimento sRGB: i valori uguali o inferiori a 0,03928 vengono divisi per 12,92, mentre i valori più grandi usano la formula ((valore + 0,055) / 1,055) elevata alla potenza di 2,4. Questa correzione gamma tiene conto del modo non lineare in cui i display emettono luce. Successivamente, la luminanza relativa viene calcolata usando i coefficienti ITU-R BT.709: L = 0,2126R + 0,7152G + 0,0722B. Questi pesi riflettono la diversa sensibilità dell'occhio umano a ciascun colore primario, con il verde che contribuisce maggiormente alla luminosità percepita. Il rapporto di contrasto finale viene calcolato come (L1 + 0,05) / (L2 + 0,05), dove L1 e la luminanza del colore più chiaro. I risultati vanno da 1:1 (colori identici) a 21:1 (nero puro su bianco puro). Lo strumento valuta poi questo rapporto rispetto alle soglie AA e AAA sia per il testo normale che per il testo grande, fornendo un chiaro risultato di superamento o mancato superamento per ogni livello di conformità.
Capire i tuoi risultati
Un rapporto di contrasto di 4,5:1 o superiore soddisfa il WCAG AA per il testo normale, lo standard che la maggior parte dei siti web dovrebbe raggiungere. Un rapporto di 3:1 soddisfa l'AA per il testo grande (18pt normale o 14pt grassetto e superiore) ed è anche sufficiente per componenti dell'interfaccia come bordi dei moduli, icone e indicatori di focus. Per il livello avanzato AAA, servono 7:1 per il testo normale e 4,5:1 per il testo grande. Quando lo strumento mostra "Non superato", significa che gli utenti con disabilità visive moderate potrebbero avere difficoltà nella lettura. Per migliorare il contrasto preservando l'estetica del brand, conviene scurire o schiarire un colore in modo incrementale anziché sostituirlo completamente. Spesso uno spostamento di appena il 10-15% nella luminosità è sufficiente per superare la soglia. Errori comuni includono l'uso di testo segnaposto grigio chiaro, l'affidamento a pesi di font sottili che riducono il contrasto percepito e la trascuratezza del contrasto degli elementi disabilitati. I risultati della simulazione del daltonismo sono altrettanto importanti. Anche se i colori scelti superano il controllo del contrasto, possono diventare indistinguibili per utenti con deficit della visione dei colori. Un pulsante rosso su sfondo verde potrebbe avere un contrasto adeguato per la visione normale ma apparire quasi identico a qualcuno con deuteranopia. Verificare sempre il proprio design su tutti i tipi di visione simulati e usare indicazioni aggiuntive come icone, pattern o etichette di testo.
Esempi pratici
Una startup che ridisegna il suo sito di marketing testa i colori del brand (#2563EB testo blu su sfondo grigio chiaro #F8FAFC) e trova un rapporto di 5,2:1, che supera AA ma non AAA. Scuriscono il blu a #1D4ED8, raggiungendo 7,1:1 e soddisfacendo entrambi gli standard senza alterare significativamente l'identità del brand. Uno sviluppatore di app sanitarie controlla lo stile dei messaggi di errore (testo rosso su bianco) e scopre che #EF4444 su #FFFFFF raggiunge solo 3,9:1, non superando nemmeno AA per il testo normale. La simulazione di daltonismo rivela che appare debole per gli utenti con protanopia. Passano a #DC2626 e aggiungono un'icona di avviso. Un designer UI convalida che tutte le etichette dei pulsanti, i bordi dei moduli e gli indicatori di focus in una libreria di componenti soddisfino almeno il requisito di 3:1 per gli elementi non testuali, assicurandosi che il testo del corpo raggiunga la soglia AA completa di 4,5:1.
Consigli Pratici per un Design Accessibile
Iniziare scegliendo coppie di colori ad alto contrasto e costruire poi la propria palette attorno ad esse. Puntare ad almeno 7:1 di contrasto per il testo del corpo anche quando è richiesto solo l'AA (4,5:1), poiché questo offre un comodo margine di sicurezza. Non affidarsi mai solo al colore per trasmettere informazioni. Usare icone, sottolineature o etichette di testo come indicatori secondari per non escludere gli utenti daltonici. Testare i propri design in modalità scala di grigi per individuare rapidamente i problemi di contrasto. Se gli elementi scompaiono o si confondono senza colore, il contrasto è insufficiente. Controllare sempre sia la modalità chiara che quella scura. I temi scuri hanno spesso un contrasto effettivo inferiore, specialmente con testo colorato su sfondi scuri. Verificare gli stati hover e focus separatamente, poiché questi stati interattivi a volte usano colori più chiari che non soddisfano i requisiti. Installare estensioni del browser per l'accessibilità come axe DevTools o WAVE per verificare pagine intere, e abbinare il controllo del contrasto alla simulazione del daltonismo per una copertura completa.
Fonti
Tutti i calcoli vengono eseguiti localmente nel tuo browser. Nessun dato viene inviato a un server.