Verifica del contrasto dei colori
Verifica i colori di testo e sfondo secondo WCAG AA e AAA, con trasparenza e il colore più vicino che supera la verifica.
Come si usa
Inserisci il colore del testo e quello di sfondo, digitando un codice o con il selettore di colore. Il rapporto di contrasto e i risultati WCAG compaiono mentre scrivi. Scambia i colori inverte i due, per testo chiaro su sfondo scuro.
Il rapporto segue WCAG 2.2: la luminanza relativa di ogni colore si calcola dai suoi valori sRGB, e il rapporto è (più chiaro + 0,05) ÷ (più scuro + 0,05), da 1:1 per due colori uguali a 21:1 per il nero sul bianco. Il testo normale richiede 4,5:1 per il livello AA e 7:1 per AAA; il testo grande, di almeno 24 px o 18,5 px in grassetto, richiede 3:1 e 4,5:1. Icone, bordi dei campi e altre parti dell’interfaccia richiedono 3:1 rispetto a ciò che hanno accanto (criterio di successo 1.4.11).
Il rapporto non viene mai arrotondato per eccesso prima del confronto: il W3C precisa che 4,499:1 non soddisfa 4,5:1. Per questo il valore è mostrato troncato, non arrotondato, a due decimali.
I colori si possono scrivere come #hex a 3, 4, 6 o 8 cifre, come rgb() o hsl() in entrambe le sintassi CSS, o con uno dei 148 nomi di colore CSS. Un colore con trasparenza viene verificato come viene dipinto, mescolato al colore retrostante; uno sfondo trasparente viene verificato sul bianco, come presuppone il WCAG quando lo sfondo non è noto. Se il testo non supera la verifica, lo strumento propone il colore del testo più vicino, con la stessa tinta e saturazione, che raggiunge 4,5:1 e 7:1. Tutto avviene nel tuo browser.
Esempio
Il grigio #777777 sul bianco dà 4,47:1, appena sotto il 4,5:1 richiesto al testo normale per AA. Il grigio più vicino che supera la verifica è #767676, a 4,54:1.
#777777 su #ffffff4,47:1: manca AA per il testo normale per pochissimo; #767676 dà 4,54:1 e lo supera.#ffffff su #1a73e84,5:1: il testo bianco su questo blu raggiunge AA esattamente ed è lontano da AAA.rgba(0, 0, 0, 0.5) su #ffffffViene dipinto come #808080, quindi 3,94:1: basta per testo grande e icone, non per il testo normale.#ff0000 su #ffffff3,99:1: il testo rosso puro sul bianco manca AA per il testo normale di pochissimo; #ee0000 lo supera con 4,53:1.
Domande frequenti
Che differenza c’è tra AA e AAA?
Sono due livelli di conformità WCAG. AA è quello richiesto dalla maggior parte delle leggi e delle norme: 4,5:1 per il testo normale e 3:1 per il testo grande. AAA è più severo, 7:1 e 4,5:1, e il W3C non consiglia di richiederlo per interi siti, perché alcuni contenuti non possono raggiungerlo.
Cosa conta come testo grande?
Almeno 18 punti, o 14 punti in grassetto. Il W3C indica come equivalenti CSS circa 24 px e 18,5 px. Un testo non è grande perché il carattere sembra grande: conta la dimensione.
La regola del contrasto vale per loghi e pulsanti disattivati?
No. Il WCAG esclude il testo di loghi e nomi di marchi, il testo puramente decorativo e le parti di un’interfaccia inattiva, come un pulsante disattivato.
Perché il mio strumento di design mostra un rapporto diverso?
Di solito perché arrotonda: 4,495 arrotondato a due decimali si legge 4,5, ma non soddisfa 4,5:1. Gli strumenti più vecchi usavano anche 0,03928 invece di 0,04045 nella formula della luminanza; il W3C precisa che in pratica non cambia i risultati.
I miei colori vengono inviati da qualche parte?
No. Il calcolo avviene nel tuo browser.