Bouton call to action : texte, contraste, place et ce que la loi impose

Bouton rouge ou bouton vert ? C'est souvent la première question qu'on se pose en montant sa boutique, parce qu'on a lu quelque part qu'un test de couleur avait fait grimper les ventes. Sur une petite boutique, la couleur se classe pourtant loin derrière trois choses : ce qui est écrit dessus, ce qui l'entoure, et, pour le bouton qui valide une commande, une mention que le Code de la consommation rend obligatoire.

J'ai relevé le 10 novembre 2026 les boutons de quatre sites français très fréquentés, et relu les textes de loi qui touchent aux boutons d'une boutique. Voici ce que j'en retiens, avec une checklist à appliquer à votre propre site.

Un bouton call to action, c'est quoi au juste

Le call to action (CTA, « appel à l'action » en bon français) désigne l'élément qui demande au visiteur de faire le pas suivant : acheter, s'inscrire, réserver, télécharger, demander un devis. Le plus souvent, il prend la forme d'un bouton. Ce peut aussi être un lien dans un email ou une ligne en fin d'article.

Un CTA ne se juge jamais seul. Il fait partie d'une page qui doit avoir une action principale, et une seule. Si votre page d'accueil propose en même temps « Voir la collection », « S'inscrire à la newsletter », « Profiter de -40 % » et « Nous suivre sur Instagram » avec la même force visuelle, le visiteur ne choisit pas. Il repart.

C'est pour ça qu'on parle de bouton principal et de boutons secondaires. Le principal est plein, contrasté, souvent répété. Les secondaires existent, mais en retrait.

La couleur compte moins que le contraste

Les fameux tests « rouge contre vert » ont été menés sur des sites précis, avec un design précis autour. Un bouton vert sur une page toute verte disparaît, le même bouton vert sur une page blanche saute aux yeux. Ces tests mesuraient donc surtout le contraste avec le reste de la page.

Regardez la page d'accueil de Shopify en France.

Le bouton principal est blanc. Pas rouge, pas vert, blanc. Il fonctionne parce que tout le reste de l'écran est sombre. À côté, « Consulter les forfaits » a exactement la même taille mais il est seulement détouré : on comprend sans réfléchir lequel des deux on attend de nous. Et « Démarrer gratuitement » revient une deuxième fois dans le coin supérieur droit, dans la barre qui reste visible au défilement.

Pour l'accessibilité, les règles internationales WCAG demandent un contraste d'au moins 3:1 entre un composant d'interface et ce qui l'entoure, et de 4,5:1 pour un texte de taille normale (critère 1.4.11 du W3C). Un bouton gris clair écrit en blanc, très à la mode sur les thèmes « épurés », échoue souvent à ce test. Vous le vérifiez en deux minutes avec n'importe quel vérificateur de contraste en ligne : on colle les deux codes couleur, il donne le ratio.

Ma règle sur une boutique : un seul bouton de la couleur d'accent par écran. Si la couleur d'accent sert aussi aux bandeaux promo, aux badges « nouveau » et aux liens du menu, le bouton d'achat ne se distingue plus de rien.

Le texte du bouton : un verbe et ce qu'on obtient

Le libellé se change en dix secondes, sans toucher au design. Un bon libellé dit ce qui va se passer après le clic. « Envoyer », « Valider », « Cliquez ici » ou « En savoir plus » ne disent rien : le visiteur doit deviner.

La formule qui marche le plus souvent tient en deux morceaux : un verbe d'action, puis l'objet ou le bénéfice. « Recevoir le guide », « Réserver ma table », « Voir les tailles disponibles », « Demander mon devis ».

Back Market, en pleine période de fêtes, aurait pu écrire « Voir les offres ». L'équipe a choisi « Préparer mes cadeaux » : la phrase parle de ce que le visiteur est venu faire en novembre, pas du catalogue. Le bouton est noir sur fond clair, seul dans sa zone, avec un titre et une ligne de texte au-dessus. Rien ne lui fait concurrence.

Le Slip Français écrit « Je soutiens », Back Market « mes cadeaux » : la première personne a du sens quand le bouton engage le visiteur sur quelque chose qui lui appartient : son devis, son panier, sa commande. Il sonne faux quand on le plaque partout.

Quelques réécritures que je ferais sans hésiter :

Le cas de Doctolib montre bien les deux usages sur un même écran.

Le bouton principal « Rechercher » est collé aux deux champs qu'il valide : aucune ambiguïté, on sait ce qu'il fait. Plus bas, « Je découvre » sous une carte éditoriale reste vague, mais la question au-dessus (« Comment prendre soin de ma santé mentale ? ») fait le travail. Un CTA vague se rattrape quand le texte juste au-dessus le précise. Seul au milieu d'une page, il laisse le visiteur deviner.

Le bouton de commande a un libellé imposé par la loi

Les guides marketing que j'ai lus en préparant cet article n'en parlent pas, alors que la règle touche toutes les boutiques qui vendent à des particuliers en France.

L'article L221-14 du Code de la consommation, en vigueur depuis le 1er juillet 2016, dit que la fonction utilisée par le consommateur pour valider sa commande « comporte la mention claire et lisible : commande avec obligation de paiement ou une formule analogue, dénuée de toute ambiguïté » (texte sur Légifrance, lu le 10 novembre 2026).

En clair, le dernier bouton de votre tunnel de paiement ne peut pas s'appeler « Valider », « Continuer », « Terminer » ou « Confirmer ». Le client doit comprendre qu'en cliquant, il s'engage à payer. « Commander et payer », « Payer maintenant » ou « Commande avec obligation de paiement » remplissent la condition. Ne partez pas du principe que votre plateforme s'en occupe : une traduction maison, une appli de paiement en un clic ou un tunnel bricolé peuvent changer ce libellé sans que vous le voyiez. Passez une commande test et lisez le bouton final, mot par mot.

Deux autres boutons sont encadrés par la loi, selon votre modèle :

• La résiliation en ligne des abonnements. Depuis le 1er juin 2023, l'article L215-1-1 oblige le professionnel qui vend des contrats en ligne à fournir « une fonctionnalité gratuite » pour résilier par voie électronique (texte sur Légifrance). Si vous vendez une box mensuelle, un logiciel ou un abonnement, le bouton de résiliation est un CTA à part entière, et il ne doit pas être caché.
• La rétractation. Depuis le 19 juin 2026, l'exercice du droit de rétractation en ligne a lui aussi son bouton. On a détaillé ce qu'il faut mettre en place dans l'article sur le bouton de rétractation obligatoire.

Pour le reste des mentions obligatoires d'une boutique (CGV, mentions légales, prix barrés), notre guide des CGV et mentions légales d'une boutique en ligne fait le tour.

Taille, place et nombre de boutons

Côté taille, le critère 2.5.8 des WCAG 2.2 fixe un minimum de 24 × 24 pixels CSS pour une cible cliquable, ou un espacement suffisant autour d'elle (page du W3C). C'est un plancher. Apple recommande 44 × 44 points pour une cible tactile dans ses recommandations d'interface, Google 48 × 48 dp pour Android. Sur mobile, un bouton d'achat devrait au moins atteindre ces dimensions, et occuper souvent toute la largeur de l'écran.

Pour la place, on entend souvent qu'un bouton doit être « au-dessus de la ligne de flottaison », visible sans défiler. Un bouton d'achat en haut de page sert le visiteur déjà convaincu. Celui qui hésite a besoin de lire d'abord : photos, avis, livraison, retours. Sur une page longue, la solution la plus simple reste de répéter le bouton : en haut, après les arguments, et dans une barre collante sur mobile. Shopify le fait avec son bouton du coin supérieur droit, toujours visible.

Reste le nombre. Plus il y a de sollicitations sur un écran, moins chacune pèse. La page d'accueil du Slip Français, relevée le même jour, en donne une bonne illustration.

Comptez ce qui demande l'attention sur le premier écran : un compte à rebours, un bandeau de livraison, un onglet latéral « Boxer offert », un bouton promo rouge dans le menu, la fidélité à droite, la bannière Téléthon et son bouton « Je soutiens », puis cinq tuiles de catégories. Le bouton doré de la bannière est bien dessiné, à la première personne, avec une flèche qui invite au clic. Mais il se bat contre six autres messages. En période de Noël, c'est un choix assumé par une marque connue, dont les clients savent déjà ce qu'ils viennent chercher. Pour une petite boutique que personne ne connaît encore, je ne recommanderais pas cette densité.

Les erreurs les plus fréquentes

Aucune n'a de rapport avec la couleur, et toutes se corrigent en une après-midi.

Un lien déguisé en bouton, ou l'inverse

Un bouton qui mène à une autre page devrait être un lien (balise a), un bouton qui déclenche une action sur la page (ajouter au panier, envoyer un formulaire) devrait être une balise button. La différence ne se voit pas, mais un lecteur d'écran et la navigation au clavier la sentent tout de suite.

Le bouton grisé sans explication

« Ajouter au panier » désactivé parce qu'aucune taille n'est choisie, sans aucun message : le visiteur croit que le produit est épuisé. Affichez plutôt « Choisissez une taille » sur le bouton lui-même.

Deux boutons identiques côte à côte

« Ajouter au panier » et « Acheter maintenant » dans la même couleur, la même taille. Le visiteur hésite, et l'hésitation fait perdre la vente. Gardez un des deux en style secondaire.

Une promesse que la page suivante ne tient pas

« Essai gratuit » qui ouvre un formulaire de carte bancaire, « Télécharger » qui demande d'abord un compte. Le premier clic marche, le second n'arrive jamais, et la confiance part avec. Dites-le dans le libellé : « Essai gratuit de 14 jours, carte demandée ».

Le popup posé sur le bouton

Bandeau cookies, fenêtre newsletter, bulle de chat : sur mobile, ils finissent souvent pile sur le bouton d'achat. Ouvrez votre fiche produit sur votre propre téléphone, en 4G, et regardez ce qui se passe pendant les cinq premières secondes.

Tester sans se raconter d'histoires

Le test A/B est la réponse classique. Sur une petite boutique, il ne donne souvent rien de fiable. Faites le calcul : 1 000 visites par mois, 2 % de conversion, c'est 20 commandes. Coupé en deux versions, 10 commandes d'un côté, 12 de l'autre. Cet écart peut venir du hasard. Il faudrait des mois pour conclure quelque chose.

Avec peu de trafic, trois méthodes donnent plus vite des réponses :

1. Le test des cinq secondes. Montrez votre page à trois personnes qui ne la connaissent pas, cachez-la après cinq secondes, demandez-leur ce qu'elles pouvaient faire sur cette page. Si elles ne citent pas l'action du bouton principal, le problème est trouvé.
2. Les cartes de clics. Microsoft Clarity est gratuit et montre où les visiteurs cliquent, jusqu'où ils font défiler la page et les clics répétés de frustration. Si personne ne descend jusqu'à votre bouton, il faut le remonter ou le répéter.
3. La commande test. Achetez chez vous, sur mobile, comme un client. Notez chaque bouton dont le libellé vous a fait hésiter une demi-seconde.

Pour savoir si les changements paient, suivez le bon chiffre au bon endroit : on a expliqué comment calculer et lire votre taux de conversion sans se tromper de dénominateur.

La checklist avant de publier une page

• Une seule action principale par page, et un seul bouton dans la couleur d'accent par écran.
• Le libellé commence par un verbe et dit ce qui se passe après le clic.
• Le contraste du bouton atteint au moins 3:1 avec le fond, 4,5:1 pour son texte.
• Le bouton mesure au moins 44 pixels de haut sur mobile.
• Sur une page longue, le bouton revient après les arguments ou reste visible au défilement.
• Le dernier bouton du paiement dit clairement que le client s'engage à payer (article L221-14).
• Si vous vendez un abonnement : le bouton de résiliation existe et se trouve sans chercher.
• Aucun popup ne recouvre le bouton sur un téléphone.
• Ce que le bouton promet arrive vraiment juste après le clic.

Pour voir ces principes appliqués à une page entière, avec la structure qui entoure le bouton, jetez un œil à nos exemples de landing pages décortiquées. Et si le texte autour de vos boutons vous pose plus de problèmes que le bouton lui-même, le guide copywriting pour mieux vendre reprend les bases. Tout ce qui touche à l'acquisition et à la conversion est rangé dans le hub marketing digital.

Foire aux questions

Quelle est la meilleure couleur pour un bouton call to action ?

Il n'y en a pas. La bonne couleur est celle qui tranche avec le reste de votre page et que vous n'utilisez nulle part ailleurs. Shopify a choisi un bouton blanc sur fond sombre, Back Market un bouton noir sur fond vert anis : les deux fonctionnent pour la même raison, le contraste.

Combien de mots dans le texte d'un bouton ?

Entre deux et cinq le plus souvent. Assez pour un verbe et un objet (« Voir les tailles »), pas assez pour faire une phrase. Si vous avez besoin d'une précision, mettez-la en petit juste sous le bouton (« Sans engagement », « Livraison sous 48 h »).

« Acheter maintenant » est-il conforme pour le bouton de paiement ?

Le Code de la consommation exige une mention qui indique sans ambiguïté que la commande oblige à payer. « Commander et payer » ou « Payer maintenant » le disent clairement. Un simple « Valider » ou « Continuer » ne le dit pas. En cas de doute sur votre cas précis, faites relire le tunnel par un juriste : c'est le libellé exact du bouton qui compte.

Faut-il mettre le bouton d'achat tout en haut de la fiche produit ?

En haut pour ceux qui sont déjà décidés, et répété plus bas pour ceux qui lisent d'abord les avis et les conditions de livraison. Sur mobile, une barre d'achat qui reste collée en bas de l'écran règle la question.