Come usare la verifica del contrasto dei colori
Usa questa pagina quando conosci i colori uniformi di testo e sfondo che saranno a contatto in un progetto. Verifica solo il contrasto del testo; non analizza un'intera pagina.
- Inserisci il colore del testo in primo piano come valore HEX di 3 o 6 cifre.
- Inserisci il colore uniforme dello sfondo dietro il testo.
- Seleziona Verifica contrasto per confermare la coppia.
- Leggi il rapporto e ogni esito scritto Superato o Non superato.
- Controlla l'esempio confermato, poi prova ogni altra coppia di colori usata nell'interfaccia reale.
Come si calcola il rapporto di contrasto WCAG
Ogni canale sRGB a 8 bit viene diviso per 255. I valori minori o uguali a 0.04045 vengono divisi per 12.92; quelli maggiori usano ((canale + 0.055) / 1.055)²·⁴. La luminanza relativa è 0.2126R + 0.7152G + 0.0722B. Il rapporto finale è (L1 + 0.05) / (L2 + 0.05), dove L1 è la luminanza più chiara e L2 quella più scura. L'intervallo possibile va da 1:1 a 21:1.
Soglie AA e AAA per il testo
Il livello AA di WCAG 2.2 richiede almeno 4.5:1 per testo normale e 3:1 per testo grande. Il livello AAA richiede almeno 7:1 per testo normale e 4.5:1 per testo grande. Testo grande significa almeno 18pt di peso normale o almeno 14pt in grassetto, con dimensione equivalente per testi CJK. In CSS, 18pt sono circa 24px e 14pt circa 18.5px. Caratteri molto sottili o insoliti possono comunque essere difficili da leggere.
Perché il numero visualizzato e l'esito possono sembrare diversi
Le soglie si applicano al rapporto interno completo, non alla visualizzazione a due decimali. Un rapporto effettivo di 4.499:1 non soddisfa 4.5:1 anche se l'etichetta arrotondata appare come 4.50:1. La verifica mantiene quindi tutta la precisione per ogni esito e arrotonda separatamente solo il rapporto mostrato e copiato negli appunti.
Cosa copre questa verifica
- Accetta solo colori sRGB HEX opachi di 3 o 6 cifre.
- Confronta un colore di primo piano con uno sfondo uniforme.
- Non compone trasparenze alfa, non campiona gradienti o immagini, non suggerisce colori sostitutivi e non analizza siti web.
- Una coppia che supera la verifica non rende da sola una pagina o un prodotto conforme a WCAG. Vanno ancora controllati altre dimensioni del testo, stati, grafica, controlli, indicatori di focus, zoom, semantica e interazioni.
Consigli pratici per la verifica
Usa i colori effettivamente specificati dove testo e sfondo si incontrano. Controlla separatamente link, stati al passaggio del puntatore e di focus, controlli disattivati, messaggi di convalida, testo su immagini e varianti del tema. Se l'antialiasing fa apparire più chiare le lettere sottili, non affidarti solo all'anteprima: la formula valuta i colori specificati, mentre la leggibilità dipende anche dal carattere e dalle condizioni di rendering.
Esempi svolti
Il nero #000000 su bianco #FFFFFF ha il rapporto massimo, 21.00:1, e supera tutte e quattro le soglie del testo.
Il grigio #767676 su bianco ha un rapporto interno di circa 4.5422:1 e supera AA normale. Il grigio #777777 è circa 4.4781:1 e non supera AA normale, anche se entrambi appaiono vicini a 4.5.
Domande frequenti
Posso inserire HEX senza il simbolo #?
Sì. Sono accettate tre o sei cifre esadecimali con o senza #, poi normalizzate nel risultato.
Perché trasparenze e gradienti vengono rifiutati?
Il loro sfondo effettivo dipende dalla composizione o dalla posizione. Questa verifica mirata accetta solo un primo piano opaco e uno sfondo opaco.
Un esito Superato significa che tutto il sito rispetta WCAG?
No. Conferma soltanto la coppia di colori del testo selezionata rispetto alle soglie numeriche elencate.
Quale risultato devo usare per testo di corpo da 16px?
Considera il comune testo di corpo da 16px come testo normale: usa almeno 4.5:1 per AA o 7:1 per AAA.
Il testo grande in grassetto può usare 3:1?
Per il livello AA sì, se soddisfa la definizione di testo grande: almeno 14pt in grassetto o almeno 18pt senza grassetto.