QR Code Generator Introduction
Un code QR placé sur une affiche ou sur une page de l'intranet fait partie de la mise en page, et un carré noir et blanc s'y intègre rarement. QR Code Generator vous permet de modifier la forme des points, les couleurs et les repères d'angle du code. Les paramètres se trouvent dans les sections réductibles situées sous les onglets de données, et chaque modification apparaît aussitôt dans l'aperçu. Cet article décrit les sections Forme, Couleurs, Corner Square (carrés d'angle), Corner Dots (points d'angle) et Error Correction (correction d'erreurs), et donne les règles qui permettent à un code personnalisé de rester lisible.
Toutes les sections sont réduites à l'ouverture du composant WebPart. Cliquez sur le nom d'une section pour la développer.
Apparence par défaut
Un nouveau composant WebPart démarre avec l'apparence suivante :
| Paramètre | Valeur par défaut |
|---|---|
| Forme des points | Carrée |
| Couleur des points, des carrés d'angle et des points d'angle | Bleu, #166aae |
| Couleur d’arrière-plan | Entièrement transparente |
| Dégradé (Gradient) | Désactivé |
| Type des carrés d'angle et des points d'angle | Carré |
| Error Correction | Quartile |
Forme
La section Forme définit le style des petits points qui portent les données. Les six styles sont présentés sous forme d'images, et un clic sur une image sélectionne le style :
- points ronds séparés ;
- arrondi — les points voisins fusionnent en lignes aux extrémités arrondies ;
- élégant — des points dont deux coins sont coupés ;
- élégant arrondi — le même style, avec des coins plus doux ;
- carré — l'aspect classique d'un code QR ;
- très arrondi — des lignes aux extrémités fortement arrondies.
La forme ne modifie que l'aspect du code. Les données encodées et le nombre de points restent identiques.
Couleurs
La section Couleurs contient deux sélecteurs de couleurs :
- Couleur — la couleur des points ;
- Couleur d’arrière-plan — la couleur de la zone située derrière le code.
Chaque sélecteur comporte un champ de couleur, un curseur de teinte et un curseur de transparence, et, en dessous, les zones Hex, Rouge, Vert, Bleu et Transparence pour saisir des valeurs exactes. Pour utiliser une couleur de la charte graphique, collez son code dans la zone Hex.
Lorsque la transparence de la Couleur d’arrière-plan est à 100, le code n'a pas d'arrière-plan et prend la couleur de ce qui se trouve en dessous : la section de la page, une diapositive, une feuille imprimée.
Dégradé
Cochez la case Gradient (dégradé) pour remplir les points avec une transition entre deux couleurs au lieu d'une couleur unique. Deux paramètres supplémentaires apparaissent :
- le type de dégradé — Linear (linéaire), du bord gauche du code vers le bord droit, ou Radial (radial), du centre vers les bords ;
- Second Color (deuxième couleur) — la couleur sur laquelle le dégradé se termine. Le dégradé commence par la couleur définie dans Couleur.
Le dégradé s'applique uniquement aux points. Les carrés d'angle et les points d'angle conservent leurs propres couleurs.
Corner Square et Corner Dots
Trois coins de chaque code QR portent les repères de position, grâce auxquels un lecteur trouve le code et détermine son orientation. Un repère se compose d'un cadre extérieur et d'un point intérieur, et chacun dispose de sa propre section.
Corner Square — le cadre extérieur :
- Type — Cercle, Carré ou Rectangle à coins arrondis ;
- Couleur — la couleur du cadre.
Corner Dots — le point intérieur :
- Type — Point ou Carré ;
- Couleur — la couleur du point.
📝 Remarque
La couleur des points définie dans la section Couleurs ne modifie pas les repères. Pour changer la couleur de tout le code, définissez la même couleur à trois endroits : Couleurs > Couleur, Corner Square > Couleur et Corner Dots > Couleur.
Error Correction (correction d'erreurs)
Un code QR contient des données redondantes, qui permettent à un lecteur de le déchiffrer même lorsqu'une partie du code est sale, endommagée ou recouverte. La section Error Correction définit la quantité de redondance ajoutée.
| Niveau | Part du code pouvant être restaurée | Quand l'utiliser |
|---|---|---|
| Faible | Environ 7 % | Données longues sur un écran propre, lorsque le code doit être le moins dense possible |
| Moyen | Environ 15 % | Codes affichés à l'écran et impressions de bonne qualité |
| Quartile | Environ 25 % | Valeur par défaut ; convient à la plupart des codes, y compris ceux qui comportent un petit logo |
| Élevé | Environ 30 % | Codes avec un grand logo et impressions susceptibles de s'user |
Un niveau plus élevé rend le code plus robuste et, à données égales, plus dense : il faut davantage de points, et chaque point devient plus petit.
Préserver la lisibilité du code
Un lecteur a davantage besoin de contraste et de repères nets que d'esthétique. Quelques règles évitent à un code personnalisé de devenir illisible :
- Foncé sur clair. Les points doivent être nettement plus foncés que l'arrière-plan. Un code clair sur fond foncé n'est pas lu par tous les lecteurs.
- Attention à l'arrière-plan transparent. Un code à l'arrière-plan transparent prend le fond de l'endroit où il est utilisé. Un code bleu, lisible sur une page blanche, disparaît sur une section sombre ou une diapositive sombre. Si vous ne savez pas où le code sera utilisé, définissez une Couleur d’arrière-plan claire et opaque.
- Ne rendez pas les points transparents. Le curseur de transparence de Couleur réduit le contraste de la même façon qu'une couleur pâle.
- Vérifiez les deux extrémités d'un dégradé. Couleur et Second Color doivent toutes deux contraster avec l'arrière-plan ; un dégradé qui s'estompe vers un ton clair rend une partie du code illisible.
- Gardez des repères bien distincts. Les repères d'angle doivent contraster avec l'arrière-plan au moins aussi bien que les points.
- Laissez une marge. Lorsque vous placez le code dans une maquette, conservez autour de lui une zone vide d'environ quatre points de largeur.
❗ Important
Testez chaque code personnalisé avec au moins deux smartphones différents avant de l'imprimer ou de le publier. L'aperçu du composant WebPart mesure 300 pixels de large ; testez également le code à la taille et à la distance auxquelles il sera réellement scanné.
Résumé
Les sections d'apparence de QR Code Generator modifient la forme des points, les couleurs, le dégradé et les repères d'angle, tandis que le niveau Error Correction définit la marge de robustesse. L'apparence est enregistrée avec la page en même temps que les données : un code personnalisé une fois conserve donc son aspect pour chaque visiteur.
💡 Astuce
Pour placer un logo au centre du code, consultez KB10266. Comment ajouter le logo de votre entreprise à un code QR. La taille de l'image et les formats de fichier sont décrits dans KB10267. Télécharger et copier un code QR : PNG, JPEG, SVG et WebP.
