Verifica Contrasto Colori

Pubblicità

Verifichi se le Sue combinazioni di colori soddisfano gli standard di accessibilità WCAG per la leggibilita del testo.

Esempi:
WCAG 2.2 12.63:1
Punteggio APCA (Lc) Lc 97
Ma la volpe col suo balzo ha superato il cane pigro.
Esempio di Testo Grande
Testo grassetto a 14pt peso 700
Pulsante Link text
Livello WCAG Testo Normale Testo Grande Componenti UI
AA (Obbligatorio)
AAA

Dimensioni Minime Carattere APCA

Peso300400500600700

Codice CSS

Simulazione Daltonismo

Ma la volpe col suo balzo ha superato il cane pigro.
Esempio di Testo Grande
Pubblicità

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 disabilita 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 conformita 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à e anche un obbligo legale in molte giurisdizioni. L'Americans with Disabilities Act (ADA) negli Stati Uniti, la Section 508 del Rehabilitation Act è lo standard europeo EN 301 549 impongono tutti che i contenuti digitali siano percepibili dalle persone con disabilita. La non conformita 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 Suo browser.

Fonti: WCAG 2.2 · SC 1.4.3 · SC 1.4.11

Come usare

  1. Inserisca i colori del testo (primo piano) e dello sfondo usando i selettori di colore o digitando codici HEX.
  2. Controlla il rapporto di contrasto e i risultati di conformita WCAG. Verde indica superato, rosso indica non superato.
  3. Usi la simulazione di daltonismo per verificare che i Suoi colori funzionino per utenti con disabilita visive.

Come usare

  1. Inserisca i colori del testo (primo piano) e dello sfondo usando i selettori di colore o digitando codici HEX.
  2. Controlla il rapporto di contrasto e i risultati di conformita WCAG. Verde indica superato, rosso indica non superato.
  3. Usi la simulazione di daltonismo per verificare che i Suoi colori funzionino per utenti con disabilita 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 conformita.

Fonti: WCAG 2.2 Luminance · SC 1.4.3

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 e 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 disabilita visive moderate potrebbero avere difficoltà nella lettura. Per migliorare il contrasto preservando l'estetica del brand, provi a scurire o schiarire un colore in modo incrementale anziché sostituirlo completamente. Spesso uno spostamento di appena il 10-15% nella luminosità e 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 Suoi colori 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. Verifichi sempre il Suo design su tutti i tipi di visione simulati e usi 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

Inizi scegliendo coppie di colori ad alto contrasto e poi costruisca la Sua palette attorno ad esse. Punti ad almeno 7:1 di contrasto per il testo del corpo anche quando e richiesto solo l'AA (4,5:1), poiché questo offre un comodo margine di sicurezza. Non faccia mai affidamento solo sul colore per trasmettere informazioni. Usi icone, sottolineature o etichette di testo come indicatori secondari per non escludere gli utenti daltonici. Testi i Suoi design in modalità scala di grigi per individuare rapidamente i problemi di contrasto. Se gli elementi scompaiono o si confondono senza colore, il contrasto e insufficiente. Controlli sempre sia la modalità chiara che quella scura. I temi scuri hanno spesso un contrasto effettivo inferiore, specialmente con testo colorato su sfondi scuri. Verifichi gli stati hover e focus separatamente, poiché questi stati interattivi a volte usano colori più chiari che non soddisfano i requisiti. Installi estensioni del browser per l'accessibilità come axe DevTools o WAVE per verificare pagine intere, e abbini 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.

Questo strumento ti è stato utile?
Vuoi dirci di più?
0/500
Vuoi che ti ricontattiamo?
Grazie per il tuo feedback!

Domande frequenti
Cos'è il rapporto di contrasto WCAG?
Il rapporto di contrasto WCAG misura la differenza di luminanza tra due colori su una scala da 1:1 (nessun contrasto) a 21:1 (contrasto massimo, nero su bianco). Le Web Content Accessibility Guidelines (WCAG) 2.1 richiedono rapporti di contrasto minimi per garantire che il testo sia leggibile per le persone con disabilità visive.
Quali sono i requisiti WCAG AA e AAA?
WCAG AA richiede un contrasto di 4,5:1 per il testo normale e 3:1 per il testo grande (18pt+ o 14pt grassetto). WCAG AAA (avanzato) richiede 7:1 per il testo normale e 4,5:1 per il testo grande. AA è lo standard per la maggior parte dei siti web, mentre AAA offre una migliore accessibilità per utenti con disabilita visive più gravi.
Cosa si intende per testo grande?
Il testo grande e definito come 18 punti (24px) o superiore per peso normale, o 14 punti (18,66px) o superiore per testo in grassetto. Il testo grande ha requisiti di contrasto inferiori perché e più facile da leggere.
Come viene calcolato il rapporto di contrasto?
Il rapporto di contrasto viene calcolato utilizzando la luminanza relativa di due colori, come definito nel Criterio di Successo 1.4.3 di WCAG 2.2. La formula e (L1 + 0,05) / (L2 + 0,05), dove L1 e la luminanza relativa del colore più chiaro e L2 quella del più scuro. La luminanza relativa tiene conto di come l'occhio umano percepisce la luminosità in modo diverso nello spettro dei colori — il verde appare molto più luminoso del blu alla stessa intensità fisica. Il rapporto risultante va da 1:1 (colori identici, nessun contrasto) a 21:1 (nero su bianco, contrasto massimo). WCAG AA richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande.
Quali sono le combinazioni di colori comuni che non superano il WCAG?
I fallimenti più comuni riguardano colori chiari su sfondi bianchi o combinazioni simili a basso contrasto. Testo rosso su sfondo verde (e viceversa) spesso fallisce perché i valori di luminanza sono simili nonostante appaiano 'diversi' nella tonalità. Testo grigio chiaro su bianco (#999 su #fff = 2,85:1, fallisce AA) e estremamente comune sui siti web. Testo giallo su bianco e quasi sempre invisibile (fallisce gravemente). Arancione su bianco e al limite. Testo segnaposto in grigio chiaro (#aaa su #fff = 2,32:1) fallisce il WCAG ed è un problema di accessibilità diffuso. In caso di dubbio, controlla ogni combinazione testo-sfondo, inclusi gli stati hover e gli indicatori di focus.
La modalità scura necessita di rapporti di contrasto diversi?
No — gli stessi requisiti di rapporto di contrasto WCAG (4,5:1 per testo normale AA, 3:1 per testo grande AA) si applicano indipendentemente dal fatto che il design utilizzi la modalità chiara o scura. Tuttavia, la modalità scura introduce sfide uniche. Testo bianco su nero puro (#fff su #000 = 21:1) causa effettivamente disagio visivo per molti utenti a causa dell'alone — il testo luminoso sembra sanguinare nello sfondo scuro, specialmente per le persone con astigmatismo. La migliore pratica per la modalità scura e usare testo bianco sporco su sfondo grigio scuro (es., #e0e0e0 su #1a1a1a = 13,28:1), che supera il WCAG AAA rimanendo confortevole da leggere.
Come influisce sRGB sul calcolo del rapporto di contrasto WCAG?
WCAG 2.2 definisce la luminanza relativa utilizzando lo standard dello spazio colore sRGB (IEC 61966-2-1). sRGB è lo spazio colore predefinito per il web e la maggior parte dei display. Prima di calcolare la luminanza, ogni canale di colore (R, G, B) deve essere linearizzato usando la funzione di trasferimento sRGB — una correzione gamma che converte i valori non lineari del display in intensità luminosa lineare. Nello specifico, i valori del canale normalizzati (0–1) pari o inferiori a 0,04045 vengono divisi per 12,92, mentre i valori maggiori usano la formula ((valore + 0,055) / 1,055) elevata alla potenza di 2,4. Questa linearizzazione è essenziale perché la luminosità del display non è proporzionale al valore del colore memorizzato. Senza linearizzazione sRGB, i rapporti di contrasto sarebbero imprecisi, in particolare per i colori di gamma media dove la curva gamma ha il maggiore effetto.
Qual è la differenza tra contrasto APCA e WCAG?
WCAG 2.2 utilizza una semplice formula di rapporto di luminanza che tratta tutto il testo allo stesso modo indipendentemente da dimensione, peso o se il testo è scuro su chiaro o chiaro su scuro. La formula produce un rapporto da 1:1 a 21:1 con soglie fisse. APCA (Accessible Perceptual Contrast Algorithm), proposto per WCAG 3.0, è un modello più avanzato. Tiene conto della differenza percettiva tra testo scuro su sfondo chiaro e testo chiaro su sfondo scuro (sensibilità di polarità). Produce un valore di Lightness Contrast (Lc) che predice meglio la leggibilità reale. APCA fornisce anche indicazioni specifiche per dimensione del font: per un dato valore Lc, raccomanda dimensioni minime del testo a diversi pesi del font. Entrambi gli standard sono disponibili in questo strumento per il confronto.
Posso usare questo come calcolatore del rapporto di contrasto per design non web?
Sì. La formula del rapporto di contrasto utilizza valori universali di luminanza sRGB applicabili a qualsiasi mezzo in cui i colori sono visualizzati su schermo — incluse app mobili, software desktop, segnaletica digitale, chioschi e presentazioni. Il calcolo misura la differenza oggettiva di luminanza tra due colori, una proprietà fisica indipendente dal mezzo. Le soglie WCAG AA e AAA (4,5:1 e 7:1) sono state sviluppate per contenuti web, ma il rapporto di contrasto sottostante è ugualmente utile per valutare la leggibilità in qualsiasi contesto digitale. Le linee guida di Apple e Google Material Design fanno riferimento alla stessa scala. Per il design di stampa, la stessa formula fornisce un'approssimazione utile, sebbene i colori stampati dipendano da inchiostro, carta e condizioni di illuminazione.
Come si usa questo verificatore di contrasto colori?
Inserisca il colore del testo (primo piano) e il colore di sfondo usando i selettori di colore, oppure digiti i codici HEX direttamente. Può anche passare all'inserimento RGB o HSL tramite le schede formato, o usare il contagocce per selezionare i colori direttamente dallo schermo. Lo strumento mostra istantaneamente il rapporto di contrasto WCAG 2.2 e il punteggio APCA, con badge superato/non superato per ogni livello. L'area di anteprima dal vivo mostra come appare realmente il Suo testo in diverse dimensioni e pesi. Se i Suoi colori non superano il test, lo strumento suggerisce le alternative più vicine che passano per i livelli AA e AAA. Può anche verificare come la Sua combinazione di colori appare alle persone con diversi tipi di visione dei colori. Usi il pulsante di condivisione per copiare un link con le Sue impostazioni colore attuali.
I miei dati sui colori sono privati quando uso questo strumento?
Sì, completamente. Tutti i calcoli di contrasto vengono eseguiti interamente nel Suo browser usando JavaScript. Nessun dato sui colori, risultato o impostazione viene mai inviato a nessun server. Lo strumento funziona offline una volta caricato, e le Sue scelte di colore non vengono mai memorizzate, tracciate o condivise. Quando usa la funzione di link condiviso, i Suoi colori sono codificati nell'URL stesso — non vengono caricati da nessuna parte.