Verifica del contrasto dei colori
Inserisci il colore del testo e quello dello sfondo per ottenere il rapporto di contrasto WCAG e l'esito superato o non superato per AA e AAA, per testo normale e grande, con anteprima in tempo reale.
Funziona nel browser; nulla di ciò che scrivi lascia il tuo dispositivo
Rapporto di contrasto –
| Uso | Richiede | Risultato |
|---|---|---|
| Testo normale, AA | 4.5:1 | |
| Testo normale, AAA | 7:1 | |
| Testo grande, AA | 3:1 | |
| Testo grande, AAA | 4.5:1 |
Usa il rapporto di contrasto WCAG 2.x, che misura solo il contrasto di luminanza. Non può giudicare le coppie problematiche per il daltonismo, come rosso su verde, i caratteri sottili o piccoli, né il testo su immagini e sfumature. Legge HEX (3, 4, 6 o 8 cifre), rgb(), hsl() e i nomi dei colori CSS; altre sintassi di colore CSS vengono lette dal tuo browser dove possibile.
Come verificare il contrasto dei colori
- Scrivi o incolla il colore del testo e quello dello sfondo come HEX,
rgb(),hsl()o un nome di colore CSS comenavy, oppure scegli ciascuno con il selettore di colore. - Leggi il rapporto di contrasto, da 1:1 per nessun contrasto a 21:1 per nero su bianco.
- Controlla la tabella: il testo normale richiede 4,5:1 per AA e 7:1 per AAA, e il testo grande richiede 3:1 per AA e 4,5:1 per AAA. L'anteprima mostra l'aspetto del testo.
Che cosa significa il rapporto di contrasto
Il rapporto di contrasto WCAG confronta la luminosità di due colori. Ogni colore viene trasformato in una luminanza relativa tra 0 (nero) e 1 (bianco), usando i valori sRGB con la curva gamma rimossa e i tre canali pesati in base a quanto l'occhio li percepisce luminosi: il verde di più, poi il rosso, poi il blu. Il rapporto è la luminanza più chiara più 0,05 diviso la luminanza più scura più 0,05, quindi va da 1:1 per colori identici a 21:1 per nero su bianco.
WCAG 2 fissa i minimi in base alla dimensione del testo. Il testo normale richiede 4,5:1 per il livello AA e 7:1 per il livello AAA, più rigoroso. Il testo grande, più facile da leggere, richiede 3:1 per AA e 4,5:1 per AAA. Grande significa almeno 24 px, o circa 18,7 px in grassetto.
Il rapporto considera solo la luminosità. Due colori possono superare la verifica ed essere comunque difficili da distinguere per chi ha il daltonismo, e i caratteri sottili o il testo su una foto possono richiedere più contrasto del minimo. Usa il valore come soglia minima e guarda l'anteprima.
Per sviluppatori / agenti IA
Devi verificare il contrasto nel codice, in una fase di build o da un agente IA? Esiste un'API apposta: vedi la guida all'API di verifica del contrasto dei colori.
Suggerimenti
- Prima devi convertire un colore tra HEX, RGB, HSL e CMYK? Usa il Convertitore di colori.
- Stai creando un insieme di colori abbinati? Il Generatore di palette di colori mostra il contrasto con bianco e nero per ogni campione.
- Ti serve il colore di un pixel in uno screenshot? Usa il Selettore colore da immagine.
Domande frequenti
Come si calcola il rapporto di contrasto?
Con la formula WCAG 2.x: la luminanza relativa di ciascun colore si ricava dai suoi valori sRGB e il rapporto è (più chiaro + 0,05) diviso (più scuro + 0,05). Va da 1:1 (nessun contrasto) a 21:1 (nero su bianco). Il rapporto è mostrato con due decimali e il valore non arrotondato è indicato accanto.
Quali rapporti richiedono AA e AAA?
Il testo normale richiede 4,5:1 per AA e 7:1 per AAA. Il testo grande, cioè almeno 24 px normale o circa 18,7 px in grassetto, richiede 3:1 per AA e 4,5:1 per AAA. Un rapporto non viene arrotondato per eccesso oltre una soglia: 4,499:1 è mostrato come 4,49 e non supera AA per il testo normale.
Perché #777777 su bianco non supera AA?
Il suo contrasto è 4,48:1, appena sotto il 4,5:1 che AA richiede per il testo normale, quindi non va bene per il testo del corpo ma supera la soglia per il testo grande, che richiede solo 3:1. Un grigio appena più scuro come #767676 arriva a 4,54:1 e supera la verifica.
Cosa succede con i colori trasparenti?
Un colore del testo parzialmente trasparente viene prima miscelato con lo sfondo, come lo mostra uno schermo, e si misura il colore risultante. Uno sfondo parzialmente trasparente si presume appoggiato sul bianco. I canali vengono arrotondati a numeri interi dopo la miscelazione.
Un rapporto che supera la soglia significa che il testo è accessibile?
Non da solo. Il rapporto misura solo il contrasto di luminosità. Non dice nulla sulle coppie problematiche per il daltonismo, sui caratteri molto sottili, sul testo su foto o sfumature, né se il colore è l'unico modo in cui viene trasmesso un significato. Consideralo un minimo, non una garanzia.
Viene inviato qualcosa a un server?
No. I colori vengono letti e misurati nel browser e nulla di ciò che scrivi lascia il tuo dispositivo.