Verifica del contrasto
Se qualcuno riesce davvero a leggerlo.
Gli esempi sostituiscono temporaneamente i dati e le impostazioni. Puoi ripristinare il lavoro precedente.
0 caratteri
Risultato
Incolla o scrivi qui sopra per vedere il risultato.
I tuoi file restano sul tuo dispositivo
Questo strumento viene eseguito interamente nel tuo browser. Ciò che incolli viene elaborato sul tuo dispositivo e non viene mai inviato a un server, quindi puoi usarlo in sicurezza con token, chiavi e testi non pubblicati.
Esempio
Esempio pratico — Verifica del contrasto
Inserisci le righe in ordine e usa le impostazioni seguenti. Confronta il risultato con le righe di uscita.
| Voce | Valore |
|---|---|
| Ingresso 1 | #000000 |
| Sfondo, quando è dato un solo colore | #ffffff |
| Uscita 1 | #000000 su #ffffff |
| Uscita 2 | Rapporto 21,00 : 1 |
| Uscita 3 | Testo corrente AA superato (minimo 4,5) |
| Uscita 4 | Testo corrente AAA superato (minimo 7) |
| Uscita 5 | Testo grande AA superato (18,66 px grassetto o 24 px, minimo 3) |
| Uscita 6 | Testo grande AAA superato (minimo 4,5) |
| Uscita 7 | Bordi, icone superato (minimo 3) |
Il nero su bianco ha un contrasto di 21:1 e supera i controlli AA e AAA del testo nello strumento.
Come funziona
- Scrivi una coppia per riga: #333 su #fff. Vanno bene anche una virgola, una barra o un semplice spazio.
- Se dai un solo colore, viene confrontato con lo sfondo indicato sopra.
- Leggi prima il rapporto: tutto il resto discende da lì.
- 4,5 è il numero da superare per il testo corrente.
Domande frequenti
- Che cosa chiedono esattamente AA e AAA?
- AA chiede 4,5 : 1 per il testo corrente e 3 : 1 per il testo grande — 24 px, o 18,66 px in grassetto. AAA chiede 7 : 1 e 4,5 : 1. Bordi, icone e i contorni dei campi modulo richiedono 3 : 1.
- Perché il mio grigio non passa?
- #777 su bianco fa 4,48 : 1 e manca l’AA per due centesimi. È il classico quasi-passato, ed è proprio il motivo per cui si verifica: a chi ha scelto il colore sembra a posto, e per parecchie persone è davvero difficile da leggere. #757575 passa.
- Conta quale colore metto per primo?
- Con colori pieni no: il rapporto è simmetrico, testo su sfondo e sfondo su testo danno lo stesso numero. Con un colore trasparente (#33333380, rgba(…)) sì: il primo viene steso sul secondo, e uno sfondo trasparente su una pagina bianca, quindi scrivi prima il colore del testo.
- Un rapporto sufficiente basta per dire accessibile?
- No. Il contrasto è un requisito tra molti e non dice nulla sugli stati di focus, sulle aree toccabili, sul movimento o sul fatto che il colore stia portando da solo un significato. È un minimo, non un verdetto.
Strumenti correlati
◒ Convertitore di colore HEX, RGB, HSL e CMYK — più il rapporto di contrasto che decide la leggibilità. ◒ Formattatore CSS Una dichiarazione per riga — o l’intero file su una sola. ◉ Strumenti per immagini Contagocce colore da immagine Un clic per un codice colore, un pulsante per la palette dell’immagine. ‹› Formattatore HTML Indentato per leggerlo, o compresso per pubblicarlo.