DocumentiImmaginiMediaStrumenti PDF

Verifica Contrasto Colori Online

Verifica il contrasto dei colori secondo WCAG 2.1. Controlla la conformita AA e AAA all'istante.

Sample Text

This is a normal text paragraph to verify readability.

16.07:1

#1a1a1f

#f8f6f3

AA Normal Text (≥4.5:1)
AA Large Text (≥3:1)
AAA Normal Text (≥7:1)
AAA Large Text (≥4.5:1)
AA UI Components (≥3:1)
Processed in your browser

Accessibilita web senza indovinare i rapporti di contrasto

WCAG 2.1 ufficiale

Usa la formula esatta di luminanza relativa del W3C. Risultati precisi e conformi.

AA e AAA a colpo d'occhio

Verifica immediatamente se la tua combinazione raggiunge il livello minimo richiesto dalla legge.

Istantaneo

Calcolo in tempo reale mentre modifichi i colori.

Nessuna registrazione

Controlla i tuoi colori senza account ne installazioni.

Tre passaggi, senza complicazioni

1

Inserisci i tuoi colori

Seleziona il colore del testo e il colore dello sfondo con il selettore di colori o inserendo direttamente valori hex, RGB o HSL.

2

Ottieni il rapporto di contrasto

Il rapporto di contrasto viene calcolato all'istante usando la formula di luminanza relativa WCAG 2.1. Verifica se soddisfa i livelli AA e AAA.

3

Regola fino alla conformita

Se il contrasto non soddisfa i requisiti, modifica i colori. Il verificatore ti indica quale livello di conformita raggiunge la tua combinazione di colori.

Hai delle domande?

WCAG (Web Content Accessibility Guidelines) sono le linee guida per l'accessibilita dei contenuti web sviluppate dal W3C (World Wide Web Consortium). Sono lo standard internazionale di riferimento per rendere i contenuti web accessibili alle persone con disabilita visive, uditive, motorie e cognitive. La versione attuale e WCAG 2.1 (pubblicata nel giugno 2018); WCAG 2.2 e stata pubblicata nell'ottobre 2023 con criteri di successo aggiuntivi. WCAG 3.0 e in fase di sviluppo e propone un nuovo modello di contrasto basato su APCA (Advanced Perceptual Contrast Algorithm).

WCAG definisce tre livelli di conformita. Livello A: requisiti di base che, se non soddisfatti, rendono il contenuto inaccessibile. Livello AA: lo standard raccomandato per la maggior parte dei siti web; richiesto dalla legge in molti paesi. Livello AAA: il massimo livello di accessibilita, non sempre raggiungibile per tutti i contenuti. Per il contrasto cromatico: AA richiede 4.5:1 per il testo normale e 3:1 per il testo grande. AAA richiede 7:1 per il testo normale e 4.5:1 per il testo grande. Le normative sull'accessibilita web (ADA negli USA, EAA in Europa) richiedono generalmente il livello AA.

Il rapporto di contrasto e un numero compreso tra 1:1 (nessun contrasto, colori identici) e 21:1 (massimo contrasto, nero su bianco). Si calcola come (L1 + 0.05) / (L2 + 0.05), dove L1 e la luminanza relativa del colore piu chiaro e L2 quella del piu scuro. La luminanza relativa di un colore sRGB si calcola trasformando ogni canale (R, G, B) da gamma a lineare: se il valore normalizzato e inferiore o uguale a 0.03928 si usa canale/12.92, altrimenti si usa ((canale+0.055)/1.055)^2.4. La luminanza finale e 0.2126 per R + 0.7152 per G + 0.0722 per B.

Negli Stati Uniti, l'Americans with Disabilities Act (ADA) si applica ai siti web degli enti interessati e i tribunali hanno stabilito WCAG 2.1 livello AA come standard applicabile. In Europa, l'European Accessibility Act (Direttiva 2019/882) e entrato in vigore il 28 giugno 2025, richiedendo che i prodotti e servizi digitali soddisfino standard di accessibilita equivalenti a WCAG 2.1 AA. Ignorare questi requisiti puo portare a contenziosi e sanzioni.

WCAG 2.1 definisce testo grande il testo di almeno 18 punti (circa 24px) con peso normale, o di almeno 14 punti (circa 18.67px) in grassetto (font-weight 700 o superiore). Questo testo ha un requisito di contrasto inferiore (3:1 per AA invece di 4.5:1) perche la dimensione maggiore favorisce la leggibilita anche con un contrasto piu basso. Loghi e testo puramente decorativo sono esenti dai requisiti di contrasto. I componenti dell'interfaccia (pulsanti, input) richiedono un minimo di 3:1 per le loro parti attive (criterio 1.4.11 Non-text Contrast).

Contrasto cromatico WCAG: accessibilita web, normative e algoritmi

Le Web Content Accessibility Guidelines (WCAG) trassero origine dalla Web Accessibility Initiative (WAI) del W3C, lanciata nel 1997. WCAG 1.0 fu pubblicata nel maggio 1999. WCAG 2.0 arrivo nel dicembre 2008, introducendo il modello a quattro principi: Percepibile, Utilizzabile, Comprensibile e Robusto (POUR). WCAG 2.1 (giugno 2018) aggiunse 17 nuovi criteri di successo, specialmente per gli utenti mobile, le persone con ipovisione e gli utenti con disabilita cognitive. Il criterio 1.4.3 (Contrasto Minimo) stabilisce i requisiti di rapporto di contrasto che rendono questo strumento necessario. La Section 508 del Rehabilitation Act statunitense (aggiornata nel 2017) incorpora per riferimento WCAG 2.0 livello AA per le tecnologie dell'informazione del governo federale.

La formula di luminanza relativa di WCAG si basa sullo spazio cromatico sRGB (IEC 61966-2-1), lo standard per i monitor dal 1999. La trasformazione gamma-to-linear di sRGB (l'operazione ((c+0.055)/1.055)^2.4 per i valori superiori a 0.03928) approssima la curva gamma reale dello standard sRGB. I coefficienti di luminosita (0.2126 per il rosso, 0.7152 per il verde, 0.0722 per il blu) riflettono la sensibilita dell'occhio umano a ciascuna lunghezza d'onda, basata sul lavoro della Commission Internationale de l'Eclairage (CIE). Lea Verou, ricercatrice al MIT e membro del W3C CSS Working Group, sviluppo un'implementazione di riferimento molto citata e creo lo strumento contrast-ratio.com nel 2012.

WCAG 3.0 (attualmente in bozza) propone di sostituire la formula di contrasto attuale con APCA (Advanced Perceptual Contrast Algorithm), sviluppata da Andrew Somers. APCA modella meglio la percezione visiva umana tenendo conto della polarita del contrasto (testo scuro su sfondo chiaro e testo chiaro su sfondo scuro sono percepiti diversamente), delle dimensioni e del peso del carattere, e dell'adattamento del sistema visivo. La scala APCA va da 0 a 106 Lc (Lightness Contrast), e le sue soglie differiscono significativamente dai rapporti WCAG 2.x: ad esempio, testo nero su bianco puro da 106 Lc, mentre combinazioni che passerebbero il livello AA in WCAG 2.x potrebbero fallire in APCA o viceversa. La transizione a WCAG 3.0 sara graduale e la versione finale non e prevista prima del 2026.