Psicologia del colore per landing page ad alta conversione

Il colore è la prima cosa che un visitatore elabora, prima ancora di leggere una parola. Comunica il settore, la credibilità e il tono in millisecondi. Influenza anche direttamente la leggibilità del testo, il che influisce sulla permanenza delle persone sulla pagina.

Questo post spiega come funziona il sistema di palette di PAGEnza e perché i vincoli che imponiamo sulla scelta dei colori producono in realtà risultati migliori rispetto a dare all'IA libertà illimitata.

Il problema di chiedere a un'IA di "scegliere bei colori"

Se chiedi a un LLM di scegliere i colori per un sito web, otterrai codici esadecimali. A volte stanno bene insieme. A volte no. Il modello non ha modo affidabile di valutare se i colori funzionano effettivamente, se il testo è leggibile, se la palette è appropriata per il settore, se la combinazione è visivamente coerente piuttosto che casualmente abbinata.

Abbiamo visto chiaramente questo problema nei primi test. La generazione di colori senza vincoli ha prodotto palette che andavano dall'eccellente al completamente inutilizzabile. Non c'era coerenza.

La soluzione è stata togliere completamente la scelta dei colori dalle mani dell'LLM e costruire un sistema algoritmico che garantisse proprietà specifiche.

Il sistema a 4 colori

Ogni sito PAGEnza utilizza esattamente quattro colori denominati:

ink — il colore primario del testo. Sempre scuro (alto contrasto di luminanza rispetto agli sfondi). Utilizzato per titoli, testo del corpo ed elementi dell'interfaccia utente che devono essere letti.

bg1 — lo sfondo primario. Solitamente il colore più chiaro della palette. Utilizzato per lo sfondo principale della pagina e le sezioni chiare.

bg2 — lo sfondo secondario. Crea varietà visiva tra le sezioni. Deve avere una temperatura di colore diversa da bg1 — se bg1 è una crema calda, bg2 è un grigio freddo o un bianco con sfumature blu.

accent — il colore del brand. Utilizzato per pulsanti, link, evidenziazioni ed elementi decorativi. Solitamente il colore più saturo della palette.

Questo vincolo — quattro ruoli denominati, non codici esadecimali arbitrari — è ciò che fa funzionare il sistema di palette. L'IA non decide mai quale colore va dove; seleziona solo quale palette utilizzare da un set pre-audited.

Come sono organizzate le palette

Manteniamo oltre 20 gruppi di palette, ognuno costruito attorno a un archetipo:

• Audace: contrasto elevato, accenti saturi — tech, SaaS, fintech
• Morbido: smorzato, desaturato — benessere, coaching, servizi creativi
• Lusso: sfondi quasi neri con accenti metallici o gioiello — servizi premium, alta gamma
• Terroso: neutri caldi con accenti terracotta o salvia — cibo, sostenibilità, artigianato
• Scuro: palette primariamente in modalità scura — sviluppatori, agenzie, gaming
• Neutro: sicuro, professionale — legale, finanza, sanità

All'interno di ogni gruppo, ci sono più palette con diverse temperature di colore, livelli di saturazione e tonalità di accento. Il sistema seleziona un gruppo in base al settore e all'archetipo, quindi sceglie una palette specifica all'interno del gruppo.

Contrasto WCAG: il vincolo che migliora il design

WCAG AA richiede che il testo normale abbia un rapporto di contrasto di almeno 4,5:1 rispetto allo sfondo. Il testo di grandi dimensioni necessita di 3:1. Gli elementi interattivi necessitano di 3:1 rispetto ai colori adiacenti.

Ogni palette nel nostro sistema viene convalidata rispetto a questi rapporti prima di essere inclusa. Nello specifico:

• ink deve ottenere un contrasto ≥4,5:1 rispetto a bg1, bg2 e qualsiasi colore di superficie in cui appare il testo
• accent deve ottenere un contrasto ≥3,0:1 rispetto a bg1 e bg2 (per l'uso come sfondi dei pulsanti)
• La validazione utilizza la matematica della luminanza reale — L = 0,2126R + 0,7152G + 0,0722B dopo la correzione gamma — non approssimazioni

L'effetto è che ogni sito generato è leggibile per impostazione predefinita. Ma c'è un beneficio secondario: i design ad alto contrasto convertono meglio. Un pulsante chiaramente visibile ottiene più clic di uno che si fonde con lo sfondo. Il requisito di accessibilità si rivela essere un requisito di conversione.

Contrasto di temperatura del colore tra le sezioni

Un dettaglio facile da trascurare: bg1 e bg2 devono avere temperature di colore contrastanti. Se entrambi gli sfondi sono caldi, le sezioni alternate risultano monotone — la pagina sembra un blob continuo piuttosto che aree di contenuto distinte.

La regola nel nostro sistema: se bg1 ha una tonalità calda (direzione arancione/giallo, o un neutro caldo come la crema), bg2 deve essere freddo (direzione blu/grigio). Se bg1 è un bianco freddo, bg2 potrebbe essere un bianco sporco caldo.

Questo è il motivo per cui le nostre sezioni risultano distinte anche senza divisori pesanti o ombreggiature — il cambio di temperatura dello sfondo da solo crea una chiara interruzione visiva.

Logica del colore specifica del settore

Alcune scelte di colore sono fortemente codificate per settore. I visitatori hanno aspettative costruite da anni di esposizione a siti web in una determinata categoria.

Sanità e benessere: blu e verdi segnalano fiducia e calma. Rossi e arancioni saturi risultano allarmanti in questo contesto.

Legale e finanza: blu scuro, antracite, grigi conservatori. Accenti luminosi sono accettabili ma devono essere contenuti. Palette giocose minano la credibilità.

Cibo e ospitalità: tonalità calde — terracotta, ambra, crema — attivano associazioni con l'appetito. Palette fredde e cliniche sembrano sbagliate.

Tecnologia e SaaS: i blu rimangono dominanti, ma c'è più varietà. Blu elettrici, indaco e persino viola risultano all'avanguardia tecnologica. Sfondi neri puri funzionano per strumenti per sviluppatori.

Lusso e premium: la chiave è la moderazione. Gamma di colori limitata, quasi neri o blu scuri come colori primari, accenti oro o platino. Alto contrasto, mai saturo.

La selezione dell'archetipo nel Design Mandate mappa il settore + tipo di attività al gruppo di palette appropriato, in modo che un coach del benessere non finisca con la stessa palette di uno studio legale, anche se entrambi sono descritti come "professionali".

Cosa possono cambiare i clienti

Dopo la generazione, i clienti possono modificare il loro sito in Gutenberg. Il selettore di colori nell'editor mostra solo i quattro colori del brand, nient'altro. Questo significa:

• Possono cambiare gli sfondi delle sezioni tra bg1, bg2 e le superfici
• Possono cambiare i colori dei pulsanti e dei link tra accent e ink
• Non possono introdurre un quinto colore arbitrario che rompa la palette

Il vincolo è intenzionale. Il modo più comune in cui i clienti rovinano un sito progettato professionalmente è scegliere colori dalla ruota dei colori completa. Limitare la palette a quattro colori denominati rende ciò impossibile senza intervenire sul codice.