Verificatore di contrasto
Local only — nothing is uploaded unless you save or share it.
Un verificatore di contrasto dei colori per i livelli di accessibilità WCAG.
- Inserisci il colore del testo e il colore dello sfondo
- Leggi il rapporto e quali livelli WCAG supera
- Se non passa, usa il colore suggerito che passa
Esempio di testo grande
Esempio di testo corrente — la misura che gran parte dei tuoi contenuti usa davvero.
Salva questo strumento
Tieni Verificatore di contrasto a portata di mano
Usa il menu Condividi del browser, poi «Aggiungi a Home».
Su questo strumento
Usalo come semplice verificatore di due colori, oppure come verificatore di contrasto con opacità: un primo piano semitrasparente viene composto sopra lo sfondo prima di calcolare il rapporto, invece di vedersi ignorare l'alfa in silenzio. Il rapporto di contrasto dei colori misura quanto un testo si distingue dallo sfondo che ha dietro, su una scala da 1 a 21. Le Linee guida per l'accessibilità dei contenuti Web fissano l'asticella a 4,5 a 1 per il testo corrente al livello AA, la abbassano a 3 a 1 per il testo grande e la alzano a 7 a 1 per il più severo livello AAA. Quei numeri non sono preferenze arbitrarie: il contrasto basso è uno dei difetti di accessibilità più comuni del web e riguarda molte più persone di quanto sembri, comprese tutte quelle con vista ridotta, chiunque abbia superato la quarantina e chiunque legga uno schermo in pieno sole. Questo verificatore calcola il rapporto come si deve, linearizzando prima i valori sRGB: è il passaggio che i calcolatori ingenui saltano e il motivo per cui i loro risultati contraddicono gli audit di accessibilità reali. Il testo traslucido viene prima composto sopra lo sfondo, perché un colore con alfa da solo non ha un vero valore di contrasto. Quando una coppia non basta, suggerisce la sfumatura più vicina del tuo colore di testo che passa.
Domande frequenti
Qual è un buon rapporto di contrasto?
4,5:1 o meglio per il testo corrente, che è il livello AA delle WCAG. Il testo grande può scendere a 3:1, e il più severo livello AAA chiede 7:1. Qualsiasi cosa sotto 3:1 è faticosa per la maggior parte delle persone e illeggibile per alcune.
Qual è un buon rapporto di contrasto?
4,5:1 o meglio per il testo corrente, che è il livello AA delle WCAG. Il testo grande può scendere a 3:1, e il più severo livello AAA chiede 7:1. Qualsiasi cosa sotto 3:1 è faticosa per la maggior parte delle persone e illeggibile per alcune.
Che cosa conta come testo grande?
18pt, cioè 24px, oppure 14pt in grassetto, cioè circa 18,66px. Tutto ciò che arriva a quella misura ha bisogno soltanto di un rapporto di 3 a 1 al livello AA invece di 4,5 a 1. Applicare la soglia del testo grande al normale testo corrente è uno dei modi più comuni in cui un audit fallisce dopo che tutti pensavano fosse superato.
Devo puntare ad AA o ad AAA?
AA è lo standard pratico ed è quello a cui rimanda gran parte della legislazione, compreso l'European Accessibility Act. AAA è più severo e difficile da centrare su un intero sistema di design, quindi di solito viene trattato come un'aspirazione per il testo corrente più che come un obbligo generale.
Perché il vostro rapporto è diverso da un calcolatore che ho usato altrove?
Quasi sempre perché l'altro fa la media dei valori RGB grezzi invece di linearizzarli prima. L'sRGB è codificato in gamma, quindi la formula WCAG applica una trasformazione precisa per canale prima di pesarli. Saltarla produce numeri che sembrano plausibili e non superano gli audit veri.
Come viene gestito il testo trasparente?
Viene prima composto sopra il colore di sfondo e poi misurato. Un colore con canale alfa non ha da solo un rapporto di contrasto sensato, perché quello che vedi davvero è una miscela. Gli strumenti che ignorano l'alfa dichiarano superato un testo che in pratica è invisibile.
Il contrasto conta anche per icone e bordi?
Sì. Le WCAG 2.1 richiedono 3 a 1 per i componenti dell'interfaccia e le grafiche che portano significato, il che copre i bordi dei campi dei moduli, gli indicatori di focus e i pulsanti con icona. Qui vengono controllati accanto ai livelli del testo.
Aiutaci a migliorare questo strumento
Hai trovato un errore, vuoi una modifica, o ti manca uno strumento?
Hai un messaggio non inviato.
Grazie — è arrivato. Troverai la risposta nella tua casella.Go to my messages