Verifica del contrasto colori
Prova testo e sfondo

Qual è un buon rapporto di contrasto per il testo?

Punta ad almeno 4.5:1 per il testo normale, che è il livello AA di WCAG. Per letture lunghe, invece, è meglio 7:1 o più, cioè il livello AAA.

Questo controllo del contrasto è gratis?

Sì. È gratis, non chiede un account e non ha limiti sul numero di coppie da provare.

I miei colori vengono inviati da qualche parte?

No. Tutto il controllo avviene nella scheda del tuo browser, quindi i tuoi colori non arrivano mai al nostro server.

Un colour contrast checker è lo stesso strumento?

Sì. Colour è la grafia britannica di color in inglese, quindi quello strumento fa esattamente lo stesso lavoro di questa pagina.

Cosa conta come testo grande?

Il testo di almeno 24px, oppure di almeno 18.66px se è in grassetto. Queste misure corrispondono a 18 e 14 punti.

Quali formati posso scrivere?

Hex con 3, 4, 6 o 8 cifre, rgb(), rgba(), hsl(), hsla() e i nomi dei colori CSS, come navy o tomato.

Come gestisce la trasparenza?

Prima di tutto, un colore del testo semitrasparente si fonde con lo sfondo prima del controllo. Allo stesso modo, uno sfondo semitrasparente si fonde prima con il bianco.

Perché lo strumento mostra 4.49 e non 4.5?

Il rapporto si taglia a due decimali e non si arrotonda mai per eccesso. Così una coppia appena sotto la soglia mostra un numero sotto la soglia, e non passa.

Scambiare i colori cambia il rapporto?

No. Il rapporto WCAG resta uguale nei due sensi. Tuttavia l’anteprima e il valore APCA cambiano, perché APCA guarda quale colore sta sopra.

Che cos’è APCA?

APCA è il metodo di contrasto della bozza di WCAG 3. Dà un punteggio Lc che dipende dalla dimensione del testo e dal colore che sta sopra.

Devo seguire APCA o WCAG 2?

Segui WCAG 2 per la conformità di oggi, perché leggi e audit fanno riferimento a esso. Usa APCA come indizio in più, dato che è ancora una bozza.

Anche icone e pulsanti hanno bisogno di contrasto?

Sì. WCAG 2.1 ha aggiunto una regola di 3:1 per icone, bordi dei campi, anelli di focus e altre parti che servono a chi usa la pagina.

Un pulsante disattivato deve passare?

No. WCAG esclude i controlli inattivi. Comunque, tienili leggibili, perché le persone devono sapere che il controllo esiste.

E i loghi e il testo decorativo?

I loghi e la pura decorazione sono esclusi. Invece qualsiasi testo con un significato deve passare, anche quello piccolo.

Come funzionano le correzioni suggerite?

Lo strumento mantiene tinta e saturazione e cambia solo la luminosità. Poi sceglie il passo più vicino che raggiunge AA o AAA.

Posso prendere un colore dallo schermo?

Sì, in Chrome ed Edge. Il pulsante Prendi dallo schermo usa il contagocce del browser. Negli altri browser, invece, usa il campione o scrivi un codice.

Cosa mostra la tabella del daltonismo?

Mostra la coppia come la vede chi non ha coni rossi, verdi o blu, e chi non vede affatto i colori. Inoltre ogni riga ha il suo rapporto.

Quanto è comune il daltonismo?

Circa 1 uomo su 12 e 1 donna su 200 hanno una forma di deficit nella visione dei colori. La confusione tra rosso e verde è la più comune.

Posso provare un’intera palette?

Sì. Incolla fino a 12 colori nel pannello della palette, uno per riga, e premi Controlla ogni coppia per avere una griglia con i voti.

Come provo un testo su un gradiente o una foto?

Scegli il punto più chiaro dietro un testo chiaro, o il più scuro dietro un testo scuro. Se il punto peggiore passa, passa anche il resto.

Il contrasto WCAG è un obbligo di legge?

In molti paesi sì. La Section 508 negli Stati Uniti e la norma europea EN 301 549 rimandano al livello AA di WCAG, e in Italia la Legge Stanca segue le stesse regole.

WCAG 2.2 ha cambiato le regole sul contrasto?

No. WCAG 2.2 mantiene gli stessi valori di contrasto di WCAG 2.1, quindi una coppia che passava prima passa ancora.

Perché altri strumenti danno un numero un po’ diverso?

Alcuni arrotondano a un decimale, e altri usano una vecchia soglia nella formula. La differenza è minima, ma può ribaltare una coppia proprio sulla soglia.

Posso condividere un risultato?

Sì. Copia il link a questa coppia ti dà un indirizzo che apre questa pagina con gli stessi due colori.

Sostituisce un audit di accessibilità completo?

No. Questo controllo del contrasto WCAG copre solo i colori. Un audit completo, invece, controlla anche tastiera, titoli, testo alternativo e molto altro.