Verifica del contrasto
Se qualcuno riesce davvero a leggerlo.
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.
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?
- No. Il rapporto è simmetrico: testo su sfondo e sfondo su testo danno lo stesso numero.
- 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.