Colori e tipografia nel sito di un medico
Il sito di uno studio medico comunica prima ancora che il paziente legga una parola. Colore di sfondo, contrasto, dimensione dei caratteri: sono scelte che decidono se una pagina sembra ordinata e affidabile, o confusa e trascurata. Vediamo come scegliere una palette che funzioni davvero, quali soglie di leggibilità contano per i pazienti più anziani, e come restare coerenti con quello che il paziente vede già fuori dallo schermo.
Perché tutti i siti medici sono blu (e quando ha senso non esserlo)
Apri dieci siti di studi medici in fila e probabilmente nove useranno una variante di blu. Non è legato a un effetto psicologico misurabile: è una convenzione visiva diventata dominante nel settore sanitario, dagli ospedali alle assicurazioni fino alle piattaforme di prenotazione. Il paziente la riconosce come "ambito medico" quasi per abitudine, prima ancora di leggere il contenuto della pagina.
Questo non significa che il blu vada scelto per default. Usato ovunque, rischia di appiattire lo studio in mezzo a decine di concorrenti che sembrano tutti uguali. In alcuni ambiti ha senso allontanarsene: nei progetti che seguiamo per la psicologia usiamo spesso toni verdi o tortora, meno associati all'ambiente clinico tradizionale e più vicini a un'idea di ascolto; per la pediatria funzionano bene toni caldi ma tenui; per l'estetica un fondo neutro con un solo colore di accento comunica ordine senza sembrare freddo.
Una palette in 4 colori: base, testo, accento, stato
Non serve una palette complessa. Nei progetti che seguiamo lavoriamo quasi sempre con quattro ruoli di colore, ognuno con un compito preciso:
- Colore di base: lo sfondo prevalente del sito, quasi sempre chiaro, per garantire il massimo contrasto con il testo.
- Colore del testo: molto scuro, non necessariamente nero puro, per un effetto meno duro sugli schermi ad alta luminosità.
- Colore di accento: uno solo, riservato ai bottoni e ai link principali, così che l'occhio lo riconosca subito come "qui si clicca".
- Colori di stato: verde per conferma, rosso per errore, usati solo nei form e nei messaggi di sistema, mai come colore dominante del sito.
Il metodo funziona perché è semplice da rispettare nel tempo: ogni nuova pagina, ogni nuovo bottone, si appoggia agli stessi quattro ruoli invece di introdurre variazioni casuali. È anche più facile da spiegare a chi, in studio, aggiorna il sito senza essere un grafico: bastano quattro nomi da ricordare, non una tavolozza intera da reinterpretare ogni volta.
Contrasto e leggibilità: le soglie WCAG che contano per i pazienti over 60
Il contrasto tra testo e sfondo non è un dettaglio estetico: è uno dei requisiti più concreti delle WCAG, le linee guida del W3C sull'accessibilità dei contenuti web. Il criterio 1.4.3, al livello di conformità AA, richiede un rapporto di contrasto di almeno 4,5:1 tra testo e sfondo per il testo normale, soglia che scende a 3:1 per il testo di grandi dimensioni, dai 18 punti in su o dai 14 punti in su se in grassetto (WCAG, criterio 1.4.3 Contrast Minimum). Il contrasto è solo una parte del quadro più ampio dell'accessibilità digitale, che riguarda anche la normativa europea e gli obblighi per gli studi privati: ne parliamo nell'articolo su accessibilità web per studi medici.
Nella pratica, molte combinazioni che sembrano leggibili a chi progetta con una vista giovane non superano questa soglia: testo grigio chiaro su sfondo bianco, bottoni con testo bianco su un accento troppo tenue, link dello stesso colore del testo circostante ma solo leggermente più scuri. Per chi ha una vista ridotta, come capita spesso ai pazienti più anziani, questi contrasti insufficienti trasformano la lettura in uno sforzo, e a volte in una rinuncia a proseguire.
Per verificare la tua palette senza competenze tecniche puoi usare uno strumento gratuito come il Contrast Checker di WebAIM: basta inserire i due colori, in formato esadecimale, e restituisce subito il rapporto di contrasto e se supera la soglia AA.
Tipografia: dimensione minima, interlinea e font che non stancano
Il colore giusto non basta se il testo è troppo piccolo o troppo compresso. Su mobile, da dove arriva la maggior parte dei pazienti, la dimensione del corpo del testo dovrebbe restare tra 16 e 18 pixel, con un'interlinea di circa 1,5 volte l'altezza del carattere: abbastanza spazio perché l'occhio non debba rincorrere la riga successiva. Le stesse soglie contano ancora di più su smartphone, dove lo spazio è ridotto e la distanza di lettura cambia in continuazione: lo trattiamo nell'articolo sul sito responsive per studi medici.
Meglio limitarsi a una o due famiglie di font in tutto il sito: una per i titoli, se serve un po' di carattere, una per il testo corrente, pensata per la lettura prolungata su schermo. Font come Inter, Source Sans o Open Sans nascono proprio per questo uso e restano leggibili anche a dimensioni contenute. I font "medicali" stereotipati, con effetti stondati o decorativi pensati per sembrare rassicuranti, spesso ottengono l'effetto opposto: rendono il sito meno serio, non di più.
Coerenza con insegna, camici e sala d'attesa
Il paziente che ha visto il tuo sito prima di venire in studio si aspetta di riconoscerlo quando arriva davanti all'insegna. Se i colori del sito non hanno nessun legame con quello che vede fuori dallo schermo, quella continuità si perde, e con essa un piccolo ma reale elemento di fiducia.
Per il lavoro fatto per il Centro Medico Porta a Terra, il colore di accento del sito non è stato scelto a tavolino: è lo stesso azzurro dell'insegna fisica della struttura, ripreso dal logo esistente. Chi arriva in auto e riconosce l'insegna, ritrova lo stesso colore aprendo il sito da telefono. È un dettaglio piccolo, ma è uno dei modi più semplici per rinforzare la sensazione di essere nel posto giusto. La regola pratica è prendere il colore dall'identità che lo studio ha già, non il contrario: rifare loghi e insegne per adattarli a una scelta grafica del sito quasi sempre non conviene.
Esempi per specialità: dentista, psicologo, fisioterapista, laboratorio
| Specialità | Palette indicativa | Font consigliato |
|---|---|---|
| Dentista | Bianco e azzurro chiaro, per comunicare pulizia e ordine clinico | Inter o Source Sans |
| Psicologo | Verde salvia o tortora, meno clinico, più vicino a un tono di ascolto | Work Sans |
| Fisioterapista | Blu petrolio con un accento arancione per comunicare energia e movimento | Public Sans |
| Laboratorio analisi | Bianco e grigio chiaro, con blu riservato a bottoni e tabelle dei referti | IBM Plex Sans, leggibile anche nelle tabelle numeriche |
Sono indicazioni di partenza, non regole fisse: la palette definitiva nasce sempre dal confronto con l'identità che lo studio ha già, non da uno schema replicato senza adattamenti. Anche cambiando la specialità, i quattro ruoli di colore visti sopra, base, testo, accento e stato, restano lo scheletro su cui costruire qualunque variazione.
La palette e la tipografia di un sito medico non servono a impressionare: servono a farsi leggere senza sforzo da chi ha davanti uno schermo piccolo e magari una vista meno acuta di dieci anni fa. Partire da contrasto, coerenza e un font pensato per lo schermo conta più di qualunque scelta di colore "di moda". Se vuoi rivedere la palette del tuo sito, guarda cosa facciamo per siti per psicologi e per siti per dentisti, oppure richiedi una consulenza gratuita: la valutiamo insieme partendo da quello che il tuo studio comunica già fuori dallo schermo.
Domande frequenti
Quali colori usare per il sito di uno studio medico?
Non esiste un colore obbligatorio: conta più la coerenza con l'identità dello studio che la scelta in sé. Una base chiara, un testo scuro ad alto contrasto e un solo colore di accento per i bottoni sono una combinazione sicura per qualunque specialità. Blu e verde restano scelte diffuse perché comunicano ordine e pulizia, ma vale la pena personalizzarli con un tono ripreso dal logo o dall'insegna fisica dello studio, invece di scegliere un colore standard senza legame con la realtà del paziente.
Che font usare per un sito medico?
Un carattere sans-serif semplice, pensato per la lettura su schermo, come Inter, Source Sans o Open Sans, funziona bene per la maggior parte dei siti medici. La dimensione del testo dovrebbe restare tra 16 e 18 pixel su mobile, con un'interlinea ampia, intorno a 1,5 volte l'altezza del carattere, per non affaticare la lettura di chi ha una vista meno acuta. Meglio limitarsi a una o due famiglie di font in tutto il sito.
Il rosso si può usare in un sito medico?
Sì, ma con parsimonia. Il rosso funziona bene per segnalare errori nei form o avvisi importanti, perché il suo significato di allerta è riconosciuto in modo pressoché universale nelle interfacce digitali. Usato come colore dominante in tutta l'interfaccia rischia invece di comunicare urgenza o allarme anche dove non ce n'è motivo, un effetto da evitare nel sito di uno studio medico.
