Selettore di colori e verifica del contrasto
Scegli un colore con il selettore o digitalo in qualsiasi formato. Visualizzalo in HEX, RGB, HSL, HSV e CMYK, ottieni tinte, ombre e colori abbinati e verifica se un testo in due colori rispetta le linee guida WCAG sul contrasto per l’accessibilità.
Colori
Informazioni su Selettore di colori e verifica del contrasto
Scegli un colore con il selettore o digitalo in qualsiasi formato. Visualizzalo in HEX, RGB, HSL, HSV e CMYK, ottieni tinte, ombre e colori abbinati e verifica se un testo in due colori rispetta le linee guida WCAG sul contrasto per l’accessibilità.
Fa parte della sezione «File, immagini e design» di SmartCalcy. Funziona nel tuo browser senza account, usa la tua valuta e le tue unità (modificabili in cima alla pagina) e fornisce stime solo a scopo informativo, quindi verifica le indicazioni ufficiali prima di fidarti di un risultato.
Come usare il Selettore di colori e verifica del contrasto
Cosa calcola e quando usarlo
Sceglie e converte colori tra HEX, RGB, HSL, HSV e CMYK, suggerisce tinte, ombre e colori abbinati e verifica il contrasto del testo secondo le linee guida di accessibilità WCAG.
Come si usa, passo dopo passo
- Scegli un colore con il selettore o scrivilo in HEX, RGB, HSL o con il nome del colore.
- Scegli un colore di sfondo per verificare il contrasto.
- Copia qualsiasi formato con un clic.
- Usa tinte, ombre e colori abbinati per creare una palette.
Cosa significa ogni dato
- Colore – Parte da #2443C8, il blu di SmartCalcy.
- Sfondo – Parte dal bianco.
Come leggere i risultati
- Rapporto di contrasto – Da 1:1 a 21:1, con i risultati AA e AAA per testo normale e grande.
- Formati – HEX, RGB, HSL, HSV e CMYK.
- Tinte e ombre – Versioni più chiare e più scure.
- Colori abbinati – Complementare, analoghi e triadica.
La formula
Rapporto di contrasto = (L1 + 0,05) ÷ (L2 + 0,05), dove L1 e L2 sono le luminanze relative del colore più chiaro e di quello più scuro. Il livello WCAG AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande; AAA richiede 7:1 e 4,5:1.
Un esempio pratico
Con i colori iniziali, #2443C8 su bianco ha un rapporto di contrasto di 7,74:1, che supera AAA per tutte le dimensioni del testo.
Ipotesi e limiti
- I valori CMYK sono una conversione semplice, non un profilo di stampa con gestione del colore.
- I risultati del contrasto seguono la formula WCAG 2.
Errori comuni
- Verificare il contrasto solo sul testo grande e poi usare il colore per il testo piccolo.
- Affidarsi solo al colore per comunicare un significato.
Domande frequenti
Che rapporto di contrasto mi serve?
Almeno 4,5:1 per il testo normale e 3:1 per il testo grande per rispettare il livello WCAG AA.
Il testo grande ha una dimensione precisa?
Sì: almeno 24 px, o circa 18,7 px in grassetto.
Posso scrivere il nome di un colore?
Sì, funziona qualsiasi nome di colore CSS, come teal o tomato.
Strumenti correlati
| Livello | Testo normale | Testo grande |
|---|---|---|
| AA | Superato | Superato |
| AAA | Superato | Superato |
Formati
- HEX
- RGB
- HSL
- HSV
- CMYK