Come verificare il contrasto tra testo e sfondo (WCAG)
In questa pagina
In breve: apri Palette colori da immagine di Imgovo, apri la scheda Contrasto, scegli un colore del testo e un colore di sfondo e leggi il risultato WCAG 2.2. Un rapporto di 4,5:1 supera l’AA per il testo normale, 3:1 supera l’AA per il testo grande e 7:1 supera l’AAA per il testo normale. Puoi ricavare i colori da una foto o scrivere i tuoi codici HEX. Non viene caricato nulla.
Cosa significa il rapporto di contrasto
Il rapporto di contrasto confronta quanto sono chiari due colori. Va da 1:1 (colori identici) a 21:1 (nero su bianco). Un testo con poco contrasto è difficile da leggere, soprattutto per chi ha una vista debole, su uno smartphone al sole o su uno schermo scadente.
I numeri da ricordare
| Livello | Testo normale | Testo grande | Elementi dell’interfaccia e icone |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
Testo grande significa almeno 24 px, oppure 18,66 px in grassetto.
Passo dopo passo
- Apri Palette colori da immagine. Aggiungi un’immagine per creare una palette oppure usa Crea una palette senza immagine.
- Apri la scheda Contrasto.
- Scegli il Colore del testo e il Colore di sfondo dalla tua palette o scrivi i tuoi.
- Guarda gli esempi (testo grande e normale) e i Risultati WCAG 2.2 per questa coppia: il rapporto e se supera o no AA e AAA.
- Se la coppia non supera il controllo, clicca su Suggerisci un colore di testo leggibile e poi su Usa il suggerimento.
- Con Scambia prova testo chiaro su sfondo scuro e viceversa. In Tutte le coppie vedi ogni combinazione della palette.
Colori da una foto
Se hai estratto una palette da una foto, non dare per scontato che vada bene per il testo. I colori morbidi o simili spesso non superano il controllo. Scegli un campione scuro per il testo e uno chiaro per lo sfondo, o il contrario, e prova la coppia. Per sapere come creare la palette leggi Come ottenere una palette di colori da un’immagine.
Guarda come altri possono vedere la palette
Lo strumento mostra anche un’approssimazione di differenze comuni nella visione dei colori. Ti aiuta a notare colori che a certe persone sembrano uguali. Non è un test di contrasto e non è uno strumento medico.
Prova i colori in un’interfaccia
La scheda Anteprima mostra i tuoi colori in un piccolo layout con pagina, scheda, testo, accento e bordo, così li vedi in contesto prima di copiare i codici nel tuo CSS.
Limiti
Il controllo misura una coppia di colori pieni alla volta. Non verifica foto dietro il testo, sfumature, stati al passaggio del mouse né il resto dell’accessibilità. Considera il risultato un controllo utile, non un certificato.
Privacy
I colori vengono verificati nel tuo browser. Non viene caricato nulla.
Provalo ora
Apri Palette colori da immagine, vai su Contrasto e prova i tuoi colori di testo e di sfondo.
Domande frequenti
Che rapporto di contrasto mi serve?
La WCAG 2.2 richiede, al livello AA, almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Gli elementi dell’interfaccia e le icone richiedono 3:1.
Cosa conta come testo grande?
Almeno 24 px, oppure 18,66 px in grassetto.
È un certificato che il mio design è accessibile?
No. Il controllo misura una coppia di colori pieni. Non è un certificato per un intero design e non verifica immagini, sfumature, testo sulle foto né altri aspetti dell’accessibilità.
Imgovo può suggerire un colore di testo leggibile?
Sì. Scegli un colore di sfondo e usa «Suggerisci un colore di testo leggibile». Poi puoi usare il suggerimento o tenere il tuo colore.
Posso controllare tutti i colori di una palette insieme?
Sì. La vista «Tutte le coppie» elenca ogni coppia di testo e sfondo della tua palette con il suo risultato.
La mia immagine viene caricata su un server?
No. I colori vengono verificati nel tuo browser e nulla lascia il tuo dispositivo.