da 1:1 a 21:1 · AA · AAA
Verifica del contrasto
Nero su bianco ha un rapporto di contrasto WCAG di 21:1, il massimo possibile, e bianco su #0060fd ha 5.13:1. Inserisci un colore del testo e uno sfondo per verificare i tuoi.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Il rapporto e i cinque controlli si aggiornano mentre digiti. Il rapporto viene troncato a due decimali, mai arrotondato per eccesso, quindi 4.499 appare come 4.49:1 e non supera il controllo 4.5:1.
Scanned by 
NortonTM Safe Web
In breve
- Prezzo
- Nessun costo
- Account
- Non serve
- Caricamento
- Non applicabile — digiti i colori, nulla viene inviato altrove
- Formula
- (luminanza più chiara + 0.05) ÷ (luminanza più scura + 0.05)
- Soglie
- AA 4.5:1 testo normale e 3:1 testo grande; AAA 7:1 testo normale e 4.5:1 testo grande; 3:1 per gli elementi dell'interfaccia
- Standard
- Definizioni WCAG 2.2 di luminanza relativa e rapporto di contrasto
Rapporti di contrasto di coppie note
Queste righe sono state prodotte dallo stesso codice del verificatore. Un segno di spunta indica che la coppia soddisfa il requisito; una croce indica che non lo soddisfa.
| Colore del testo | Sfondo | Rapporto | AA normale | AA grande | AAA normale | AAA grande | Elementi interfaccia |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Controllo | Rapporto minimo |
|---|---|
| AA, testo normale | 4.5:1 |
| AA, testo grande | 3:1 |
| AAA, testo normale | 7:1 |
| AAA, testo grande | 4.5:1 |
| AA, elementi dell'interfaccia e grafici | 3:1 |
Come verificare una coppia di colori
Inserisci i due colori
Digita il colore del testo e quello dello sfondo in una qualsiasi notazione CSS, oppure usa i selettori. Il pulsante di scambio li inverte, utile per il testo chiaro su sfondo scuro.
Leggi il rapporto
Il rapporto va da 1:1 (colori identici) a 21:1 (nero su bianco). L'esempio sotto i campi mostra la coppia a 16 px e a 24 px, così puoi giudicare il risultato a occhio.
Guarda i cinque controlli
Ogni riquadro indica Superato o Non superato per un requisito WCAG: AA e AAA per il testo normale, AA e AAA per il testo grande, e AA per gli elementi dell'interfaccia. Se il testo normale non supera AA, la pagina suggerisce il colore del testo più vicino che lo supera.
Come si calcola il rapporto di contrasto
WCAG misura il contrasto attraverso la luminanza relativa, la luminosità di un colore da 0 (nero) a 1 (bianco). Ogni canale rosso, verde e blu viene diviso per 255; un valore fino a 0.04045 viene diviso per 12.92, mentre un valore maggiore viene elevato a potenza: (valore + 0.055) diviso 1.055, poi elevato a 2.4. La luminanza è poi 0.2126 volte il rosso più 0.7152 volte il verde più 0.0722 volte il blu, il che riflette quanto intensamente l'occhio risponde a ciascuno. Il rapporto di contrasto è la luminanza più chiara più 0.05, diviso la luminanza più scura più 0.05.
WCAG 2 richiede almeno 4.5:1 per il testo normale e 3:1 per il testo grande al livello AA, e 7:1 e 4.5:1 al livello AAA. Il testo grande è di almeno 18 punti, cioè 24 pixel CSS, oppure di almeno 14 punti in grassetto, circa 18.66 pixel. Il criterio di successo 1.4.11 richiede 3:1 per gli elementi dell'interfaccia e i grafici che un lettore deve vedere, come il bordo di un campo o la linea di un grafico. Il rapporto viene confrontato con ogni soglia senza arrotondamenti. Se un colore ha trasparenza, prima di misurare uno sfondo trasparente viene steso sul bianco e un colore del testo trasparente sullo sfondo. Questa pagina implementa solo WCAG 2.x; non calcola APCA, di cui si discute per una versione futura delle linee guida.
Domande sul contrasto
Quale rapporto di contrasto richiede WCAG per il testo?
Al livello AA, il testo normale richiede almeno 4.5:1 e il testo grande almeno 3:1. Al livello AAA i valori sono 7:1 per il testo normale e 4.5:1 per il testo grande. Il rapporto si misura tra il colore del testo e il colore direttamente dietro di esso.
Che cosa si considera testo grande?
WCAG definisce testo grande quello di almeno 18 punti, cioè 24 pixel CSS, oppure di almeno 14 punti in grassetto, cioè circa 18.66 pixel CSS. Tutto ciò che è più piccolo conta come testo normale e richiede il rapporto più alto.
Qual è il grigio più chiaro che supera AA su bianco?
#767676 su bianco ha un rapporto di 4.54:1 e supera il controllo 4.5:1 per il testo normale. Il grigio appena più chiaro, #777777, ottiene 4.47:1 e non lo supera. Per 7:1 (AAA), il grigio più chiaro è #595959, che ottiene 7.00:1.
Perché 4.49 non supera il controllo pur sembrando 4.5?
I controlli confrontano il rapporto esatto con la soglia. Un rapporto di 4.499 è sotto 4.5, quindi non lo supera, e la pagina lo stampa come 4.49:1 invece di arrotondarlo per eccesso. Il rosso puro su bianco è un esempio reale: 3.99:1 non supera il controllo 4.5:1 per il testo normale, anche se ci va vicino.
Che contrasto servono a icone, bordi e campi di un modulo?
Il criterio di successo 1.4.11 Contrasto non testuale, aggiunto in WCAG 2.1, richiede almeno 3:1 tra gli elementi dell'interfaccia o un grafico che un lettore deve vedere, come il bordo di un campo, un anello di focus o la linea di un grafico, e i colori adiacenti. I controlli disabilitati e i grafici puramente decorativi sono esclusi.
Un rapporto sufficiente rende accessibile una pagina?
No. Il contrasto è un requisito tra tanti. Contano anche dimensione e peso del carattere, interlinea, significato affidato al solo colore, visibilità del focus, testo su immagini e sfumature, e come una pagina viene vista da persone con diversi tipi di visione dei colori. Usa questo risultato come un solo elemento di giudizio e prova la pagina con contenuti reali.