keep in touch:

Inviaci un messaggio:

Inviando questo modulo autorizzo il trattamento dei dati forniti al solo scopo di ricevere una risposta alla mia richiesta

Categoria: Web design e UXWeb design e UX

Colore del bottone CTA: non è la tonalità che conta, è il contrasto

Calendario

Autore articolo Filippo Maniscalco

Colore del bottone CTA: non è la tonalità che conta, è il contrasto

Durante le  lezioni di laboratorio, quando apro un progetto di un mio studente, la prima cosa che attenziono è sempre la call-to-action scelta. In particolare non mi concentro sul colore ma sul contrato che si genera rispetto al suo sfondo. E' nel contrasto scelto che si comprende se lo studente ha davvero capito come funziona l'attenzione visiva in ambienti digitali o se ha scelto il colore che gli piaceva di più.

L'errore si ripete talmente spesso che ho deciso di scrivere un breve articolo sul tema. Si progetta un bottone bellissimo, totalmente coordinato rispetto alla palette del brand e corente con il design system ma  quella CTA tende a "mimetizzarsi" nella pagina. Il problema non è il colore scelto ma il fatto che, con un contrasto troppo basso, il bottone non si isola a sufficienza dal resto del contenuto.

Scegliere un rapporto di contrasto adeguato, secondo regole ormai testate e certe, è il primo passo per ottenere maggiori rendimenti nelle conversioni.

Perché "che colore devo usare per il bottone?" è la domanda sbagliata

È la domanda che sento più spesso, ed è anche quella che porta quasi sempre alla risposta sbagliata. In rete circolano decine di articoli con titoli come "il rosso converte il 34% in più del verde", presentati come regole universali. Il problema è che, se prendiamo tutti questi studi e li allineiamo uno di fianco all'altro, questi test si contraddicono a vicenda e la ragione per cui si contraddicono è la chiave di tutto questo articolo.

Il vero motivo per cui un bottone "funziona": l'effetto Von Restorff

Nel 1933 la psichiatra e pediatra Hedwig von Restorff descrisse un fenomeno che oggi usiamo ogni giorno nella progettazione delle interfacce: quando un elemento si distingue nettamente dagli altri elementi simili intorno a lui, il cervello lo nota di più e lo ricorda meglio. È lo stesso motivo per cui, in una lista di dieci parole scritte in nero, quella scritta in rosso è l'unica che ricordi il giorno dopo.

Applicato a una pagina web, questo si traduce in qualcosa di molto concreto, ossia che la CTA non deve "piacere" ma deve distinguersi nel colore, ma anche nella dimensione, nello spazio bianco intorno, nella posizione. Il contrasto è lo strumento con cui costruiamo questa distinzione. Ed è anche il motivo per cui lo stesso colore può funzionare benissimo su un sito e fallire su un altro: non è una proprietà del colore, è una relazione tra il bottone e tutto ciò che lo circonda.

Cosa dicono davvero i test A/B e non le leggende

Qui vale la pena essere onesti con i dati, invece di limitarsi a citarli. Alcuni dei test più ripresi online esistono davvero:

  • Un test di Dmix su circa 600 utenti ha visto il bottone rosso convertire il 34% in più del verde.
  • HubSpot, su un campione di oltre 2.000 visite, ha registrato un +21% passando dal verde al rosso.
  • VWO, su un e-commerce mobile, ha misurato un +5% con un bottone arancio scuro rispetto al bianco e al verde.
  • Monetate ha visto il blu superare l'arancione del 9%.

Il punto è che questi risultati non possono essere letti come "il colore X è il migliore" perchè si contraddicono a vicenda. CXL, una delle fonti più rigorose in ambito CRO, arriva alla stessa conclusione analizzando questi stessi test e afferma che non esiste un colore vincente universale. In ogni test, a vincere è stato il bottone con più contrasto rispetto al resto della pagina in quel contesto specifico, non un colore magico.

Il caso Google e i "41 shades of blue": una storia da raccontare con cautela

Vale la pena citare anche una storia molto famosa, ma da maneggiare con attenzione, quella dei "41 shades of blue" di Google, in cui Marissa Mayer avrebbe fatto testare 41 tonalità diverse di blu per i link, con un impatto stimato in 200 milioni di dollari di ricavi pubblicitari aggiuntivi. Il numero circola ovunque, ma se lo guardiamo nel contesto (i ricavi pubblicitari di Google in quell'anno erano oltre 22 miliardi di dollari) parliamo di meno dell'1%. E diversi analisti hanno fatto notare un problema metodologico serio ossia che Google non aveva alcun controllo su come i singoli monitor rendessero quella tonalità di blu. Entrano in gioco differenze di calibrazione del monitor che rendono il test molto meno solido di come viene raccontato. La cito sempre ai miei studenti non per il numero, ma come esempio di quanta cautela serva prima di trattare un case study virale come un dato di fatto.

Come lavorano davvero i grandi player (Amazon, Booking.com)

Qualche giorno fa su Instagram mi è capitato di vedere un reel sul fatto che "Amazon investa miliardi di dollari nel testare il colore dei bottoni". E' un'affermazione che gira spesso online, ma non ho trovato una fonte verificabile che la sostenga con numeri reali. Quello che invece è documentato e che trovo molto più interessante da un punto di vista didattico, è come questi grandi player abbiano costruito una cultura della sperimentazione, non una caccia al colore perfetto:

  • Amazon pubblica su Amazon Science le proprie metodologie di sperimentazione — ad esempio "Pricing Labs", la piattaforma con cui l'azienda testa in modo statisticamente controllato variazioni su scala enorme, gestendo problemi complessi come la contaminazione tra gruppi di test. Non è materiale di marketing: sono paper di ricerca reali.
  • Booking.com esegue circa 25.000 test A/B all'anno, secondo un dato riportato da Harvard Business Review. Stanno testando in modo sistematico ogni variazione di contrasto, copy, posizione e gerarchia visiva, su una scala che nessuna piccola azienda può permettersi.

La lezione che porto in aula non è "copia il colore di Amazon" bensì "il contrasto va testato nel proprio contesto, non copiato da un case study letto online".

Ed è questo metodo che portiamo nei laboratori del Master Designer Full-Stack: Graphic + UX/UI Design. Non regole di colore calate dall'alto, ma un metodo che passa dalla psicologia alla percezione e termina con la lettura dei dati di un test che poi si applica a ogni progetto reale.

Lo strumento pratico: come misurare il contrasto in 2 minuti

Questa è la parte che faccio sempre fare in laboratorio ai miei studenti, perché il contrasto non va "sentito a occhio" ma si misura. E non serve saper leggere il codice: basta un colore preso dalla pagina e uno strumento gratuito.

  1. Prendi i due colori. Ti servono il colore di sfondo del bottone e il colore dell'area (o sezione) su cui il bottone è appoggiato. Puoi prenderli con un contagocce/color picker qualunque, molti browser ne hanno uno integrato, e ti basta il codice esadecimale (es. #ff5a3c).
  2. Inseriscili nel Contrast Checker di WebAIM. Metti il colore del bottone come "Foreground" e il colore dell'area circostante come "Background": lo strumento calcola subito il rapporto di contrasto reale tra i due.
  3. Puoi anche utilizzare una chat IA come ChatGPT o Claude per inviare lo screenshot e chiedere di calcolarlo.
  4. Guarda la riga "Graphical Objects and User Interface Components", non solo quella del testo. Il Contrast Checker valuta entrambe, ma sono due domande diverse. Quella sul testo risponde a "il testo del bottone si legge bene?"; quella sui componenti grafici/UI risponde a "il bottone si distingue da quello che lo circonda?" che è esattamente la domanda che ci interessa qui.
  5. Il numero a cui puntare: almeno 3:1. Non è una regola inventata ma è il criterio WCAG 2.1 1.4.11 Non-text Contrast, che richiede un rapporto minimo di 3:1 tra un componente d'interfaccia (bottoni inclusi) e il colore adiacente. È una soglia di accessibilità, pensata in origine per chi ha bassa visione o daltonismo ma è anche, di fatto, la soglia minima sotto la quale un bottone rischia di non "isolarsi" a sufficienza per nessuno. Sopra il 3:1 il bottone è quantomeno riconoscibile come elemento a sé; più sali, più il contrasto aumenta.

Cosa consiglio davvero

Non un colore ma una regola: la tua CTA deve avere un contrasto netto rispetto a ogni altro elemento cliccabile o colorato nella stessa schermata, e va sempre validata con un vero test A/B — anche piccolo — prima di dire che "funziona".

Se questo modo di ragionare — dalla teoria della percezione alla lettura di un test, fino alla progettazione pratica — ti interessa, è il metodo che insegniamo nei nostri master.

Master in UX/UI Design

Prossima data: 28-09-2026

Durata:200 ore

Promozione a tempo

2500 €2250 €

Promo Last Call - Risparmia il 10%

Torna in alto