Verifica del contrasto dei colori WCAG
Scegli il colore del testo e quello dello sfondo e ottieni subito il rapporto di contrasto e se rispetta i livelli AA e AAA delle linee guida di accessibilità WCAG. Se non lo rispetta, lo strumento propone un colore simile che lo supera. Tutto avviene nel tuo browser.
Elaborato al 100% nel tuo browser
–
Grande: 24 px o più, oppure 18,66 px in grassetto.
Titolo di esempio
Ecco come si legge il testo con i colori scelti. Un buon contrasto aiuta tutti, anche chi legge al sole o ha la vista stanca.
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Scrivi o scegli il colore del testo e dello sfondo (hex, rgb, hsl o nome).
- 2Guarda il rapporto di contrasto e i risultati AA e AAA.
- 3Controlla l’anteprima con i tuoi colori.
- 4Se non è conforme, premi «Usa» sull’alternativa suggerita.
Casi d’uso
- Verificare che i testi del tuo sito siano leggibili da chi ha una vista ridotta.
- Convalidare una palette di brand prima di consegnarla.
- Rispettare i requisiti di accessibilità richiesti ai siti pubblici e commerciali.
- Scegliere il colore di un pulsante che risalti sullo sfondo.
Domande frequenti
Quale contrasto minimo richiede WCAG?
Livello AA: 4,5:1 per il testo normale e 3:1 per il testo grande e i componenti dell’interfaccia. Livello AAA: 7:1 per il testo normale e 4,5:1 per il testo grande.
Cosa conta come testo grande?
Quello da 24 px in su, oppure da 18,66 px in grassetto (circa 18 e 14 punti). Per esso è ammesso un contrasto minore.
E se il mio colore è trasparente?
Lo strumento lo miscela prima con lo sfondo per ottenere il colore realmente visibile e poi misura il contrasto.
Ci sono eccezioni alla regola?
Sì: testo decorativo, loghi ed elementi disattivati non sono tenuti a rispettarla, anche se è comunque bene che si leggano.