Verificatore di contrasto
Indichi un colore di testo e di sfondo e veda subito il rapporto WCAG 2.2 e il risultato AA/AAA.
Questo strumento calcola il rapporto di contrasto tra un colore di testo e uno di sfondo scelti da lei, secondo la formula di luminanza relativa di WCAG 2.2. Può inserire un colore con il selettore, oppure come HEX, RGB o HSL, incluso l'HEX abbreviato. Il risultato appare insieme a un'anteprima dal vivo di testo, pulsante e link a dimensioni reali, per valutare l'aspetto e non solo un numero. Se inserisce un colore trasparente (alfa), viene miscelato con lo sfondo scelto prima di calcolare il rapporto.
Il risultato viene confrontato con quattro soglie: AA 4,5:1 e AAA 7:1 per il testo normale, AA 3:1 e AAA 4,5:1 per il testo grande, e 3:1 per i componenti dell'interfaccia e i grafici. Se il rapporto non basta, lo strumento suggerisce il colore valido più vicino mantenendo la stessa tonalità, suggerimento applicabile con un clic. In modalità palette può inserire da 2 a 6 colori e vedere il rapporto di tutte le coppie in un'unica tabella.
Questo controllo calcola solo un rapporto di contrasto numerico, non considera altri fattori di leggibilità come il carattere, la spaziatura tra le lettere o il disordine visivo attorno al testo, e non analizza una pagina reale al posto suo. Diversi tipi di daltonismo percepiscono lo stesso rapporto in modo diverso, quindi un rapporto che supera la soglia non garantisce una lettura comoda per tutti. Una valutazione di accessibilità completa richiede anche test con utenti reali o uno screen reader.
Domande frequenti
Quanto deve essere grande un testo per contare come grande?
Secondo WCAG conta come testo grande circa 18 pt (24 px) normale o 14 pt (18,5 px) grassetto e oltre; tutto ciò che è più piccolo deve rispettare le soglie più severe del testo normale.
Devo puntare ad AA o ad AAA?
AA è il livello di base atteso sulla maggior parte dei siti; AAA è un obiettivo più severo e consigliabile quando l'accessibilità è prioritaria, ma più difficile da raggiungere mantenendo i colori del marchio.
Se il rapporto supera la soglia, il mio design è del tutto accessibile?
No, il rapporto di contrasto è solo un fattore, anche carattere, peso, spaziatura e contenuto circostante influenzano la leggibilità, quindi un rapporto che supera la soglia non sostituisce una valutazione di accessibilità più completa.
I colori che inserisco vengono salvati da qualche parte?
No, tutto viene calcolato interamente nel suo browser, nessun colore o palette lascia il suo dispositivo.
