Come scegliere un colore leggibile per un sito web?
Guida completa per selezionare colori leggibili sul web. Scopri le regole di contrasto, le buone pratiche e gli errori da evitare.
Prova il nostro strumento gratuito
Nessuna registrazione richiesta, elaborazione 100% locale.
La leggibilità è il fondamento di ogni esperienza utente di successo. Un sito web può essere magnifico, ma se i visitatori faticano a leggere il contenuto, se ne andranno in pochi secondi. Scegliere colori leggibili non è solo una questione di estetica — è una necessità funzionale che impatta direttamente l'engagement, la conversione e l'accessibilità del tuo sito.
Eppure questo problema viene spesso trascurato. Designer talentuosi creano combinazioni visivamente accattivanti che falliscono i test di leggibilità più basilari. Un grigio elegante su bianco? Illeggibile per il 30% dei visitatori. Testo bianco su immagine di sfondo? Una lotteria a seconda delle zone dell'immagine.
Questa guida ti insegna a padroneggiare i principi scientifici dietro la leggibilità dei colori. Scoprirai come valutare il contrasto, quali combinazioni funzionano universalmente, e come usare i nostri strumenti per validare le tue scelte prima della produzione.
Indice dei contenuti
Usare bene text-readability
text-readability aiuta a velocizzare il lavoro con colori e contenuti visivi.
Le raccomandazioni coprono usi di accessibility, qualità del risultato e coerenza con progetti web.
Come fare in 3 passaggi
Identifica il tuo colore di sfondo principale (solitamente bianco, crema o grigio molto chiaro per contenuti testuali).
Usa il nostro strumento di leggibilità per testare diversi colori del testo. Inizia con grigi scuri e regola finché raggiungi un rapporto minimo di 4.5:1.
Valida ogni combinazione della tua palette con l'analizzatore WCAG. Annota i rapporti e i livelli di conformità (A, AA, AAA).
Simula la tua palette con il nostro strumento per il daltonismo per verificare che rimanga leggibile per tutti i tipi di visione.
Esporta i tuoi colori validati con note sul contrasto per la documentazione del tuo design system.
Consigli dei professionisti
- Salva i colori principali come variabili riutilizzabili.
- Testa il risultato su mobile, desktop, modalità chiara e scura.
Errori comuni da evitare
- ✗Usare il grigio medio (#808080) per il testo secondario — questo grigio è al limite della leggibilità e spesso fallisce i test.
- ✗Testare la leggibilità solo sul proprio schermo ben calibrato, dimenticando che la maggior parte degli utenti ha display meno performanti.
- ✗Confondere il contrasto di tonalità con il contrasto di luminanza — colori molto diversi possono avere la stessa luminanza ed essere illeggibili insieme.
Strumenti complementari
Domande frequenti
Articoli correlati
text-readability: guida pratica per accessibility
Guida localizzata per usare text-readability, capire le buone pratiche di accessibility ed evitare errori comuni.
text-readability: guida pratica per accessibility
Guida localizzata per usare text-readability, capire le buone pratiche di accessibility ed evitare errori comuni.
text-readability: guida pratica per accessibility
Guida localizzata per usare text-readability, capire le buone pratiche di accessibility ed evitare errori comuni.
Pronto a provare?
Il nostro strumento è gratuito, senza registrazione e rispetta la tua privacy.
Prova Lisibilité texte ora