Cartes Wi-Fi invité à imprimer : conception, sécurité et tests des codes QR
Une affiche Wi-Fi peut sembler parfaite sur un ordinateur et ne pas fonctionner à l’accueil. Le code QR peut être imprimé trop petit, un fond sombre peut réduire son contraste ou le lecteur peut ne pas comprendre le mode de sécurité du réseau. Même un code correctement lu peut contenir des identifiants que le routeur n’accepte plus.
Une carte utile remplit deux fonctions : aider les visiteurs à se connecter rapidement et leur proposer une solution si le scan échoue. Ce guide suit tout le parcours, du choix des identifiants à l’impression et aux tests d’une carte accessible et facile à tenir à jour.
Définir d’abord le réseau à partager
Un code QR ne crée pas de réseau Wi-Fi et ne change pas le mot de passe du routeur. Il représente des informations de connexion. Avant de dessiner la carte, vérifiez la configuration du routeur ou du point d’accès :
- Existe-t-il un SSID, c’est-à-dire un nom de réseau, réservé aux invités ?
- L’isolation des invités est-elle activée si vous souhaitez les séparer des appareils du bureau ou de la maison ?
- Le réseau utilise-t-il WPA2 Personal avec AES, le mode mixte WPA2/WPA3 ou WPA3 Personal ?
- Un portail captif doit-il être validé après la connexion ?
- Qui change le mot de passe et remplace les affiches ?
L’isolation des invités et les limites de connexion sont des fonctions du routeur, pas du code QR. Masquer le SSID ne sécurise pas non plus le réseau. Si les visiteurs ont uniquement besoin d’un accès à Internet, envisagez un réseau invité séparé plutôt que d’afficher les identifiants du réseau principal.
La documentation du générateur de codes QR Wi-Fi détaille les compromis entre WPA2, WPA3, Enhanced Open et l’ancien WEP. Le générateur produit un code à partir de paramètres qui fonctionnent déjà sur votre routeur.
Créer un mot de passe invité solide et utilisable
Un lieu événementiel peut préférer un mot de passe facile à dicter ou à saisir. Un espace de travail peut choisir une longue valeur aléatoire que les visiteurs n’auront pas besoin de taper grâce au scan. Les deux approches conviennent si le secret est imprévisible et compatible avec le routeur.
Le générateur de mots de passe et de phrases de passe propose des caractères aléatoires ou des suites de mots tirés au hasard. Pour les réglages WPA/WPA2 Personal courants, respectez les contraintes de longueur et d’octets acceptées par votre routeur. Le guide des mots de passe et phrases de passe solides explique pourquoi longueur, hasard et unicité comptent davantage que les substitutions astucieuses.
Utilisez un exemple fictif pour concevoir la carte :
Network: Example Guest
Password: example-guest-passphrase
Ne remplacez ces valeurs par les véritables paramètres qu’une fois la mise en page testée. Conservez le mot de passe invité de manière sûre et définissez quand le changer. Toute personne capable de lire ou de décoder le code QR imprimé peut récupérer le mot de passe qu’il contient. Une image QR n’est pas un coffre chiffré.
Générer le code avec les paramètres réels du routeur
Ouvrez le générateur de codes QR Wi-Fi de Web2Generators et saisissez exactement le SSID et le mot de passe, majuscules et espaces compris. Sélectionnez le type de sécurité du routeur, pas celui que vous souhaiteriez lui appliquer.
Le générateur produit un PNG pour l’écran ou l’impression. Il prend en charge les paramètres WPA/WPA2 courants, WPA3 Personal (SAE), les réseaux ouverts, Enhanced Open et certains cas particuliers. L’option Enhanced Open utilise un contenu sans mot de passe : le chiffrement dépend de l’appareil et du réseau, et le code ne l’impose pas. La prise en charge varie selon les lecteurs, notamment pour WPA3 seul et les formats moins courants. Le bon fonctionnement sur un téléphone ne garantit pas que tous les appareils invités comprennent le même contenu QR.
Si le nom du réseau contient un point-virgule ou une barre oblique inverse, ne supprimez pas ces caractères. L’outil échappe les séparateurs de son format. Il permet aussi d’inspecter les données encodées, ce qui aide au diagnostic mais révèle les identifiants à quiconque les voit.
Le PNG exporté comporte une marge blanche autour du code. Conservez cette zone de silence : laissez au moins quatre modules libres sur les quatre côtés pour que le lecteur puisse repérer les limites du code.
Une carte imprimée compréhensible au premier regard
Le code QR n’est pas une icône décorative. La mise en page doit donner une instruction simple et faciliter sa lecture :
- Un titre clair : “Wi-Fi invité”.
- Une consigne courte : “Ouvrez l’appareil photo et scannez pour vous connecter”.
- Un code QR grand, net et entouré d’espace blanc.
- Un nom de réseau lisible et, si cela convient, un mot de passe saisissable à la main.
- Une indication d’aide, par exemple : “Adressez-vous à l’accueil si le scan ne fonctionne pas”.
Ne placez pas le code sur une photo, un dégradé ou une texture. Utilisez des modules sombres sur une surface claire unie. Évitez d’arrondir ou de recolorer les carrés sans tester soigneusement le résultat avec plusieurs lecteurs. Un code noir et blanc est plus facile à reproduire régulièrement sur différentes imprimantes.
Color Studio et son contrôle de contraste aident à choisir des couleurs d’accent pour le titre et la carte, puis à vérifier le texte sur son fond. Un contrôle de contraste du texte ne certifie pas la fiabilité du scan du code QR. Gardez le code lui-même simple.
Une carte HTML simple avec du CSS pour l’impression
Pour un fichier HTML local ou une page réservée au personnel, utilisez du HTML sémantique ordinaire. Enregistrez le PNG du générateur sous le nom guest-wifi.png, puis référencez-le localement. Le balisage ci-dessous utilise des valeurs fictives. Un vrai PNG QR contient toujours les identifiants, même si le HTML ne les affiche pas : conservez donc les deux fichiers dans le cadre de partage prévu. Les exemples gardent leur texte anglais ; adaptez également lang si vous traduisez la carte.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guest Wi-Fi card</title>
<link rel="stylesheet" href="wifi-card.css">
</head>
<body>
<main class="guest-card" aria-labelledby="card-title">
<p class="eyebrow">Welcome</p>
<h1 id="card-title">Guest Wi-Fi</h1>
<p>Scan with your camera to join.</p>
<img src="guest-wifi.png" width="300" height="300"
alt="Wi-Fi QR code for Example Guest. Ask reception for manual connection details.">
<dl>
<div><dt>Network</dt><dd>Example Guest</dd></div>
<div><dt>Password</dt><dd>Ask at reception</dd></div>
</dl>
<p class="help">Having trouble? Ask a member of staff.</p>
</main>
</body>
</html>
Ce texte alternatif identifie l’image et renvoie vers une solution sans scan. Il ne suppose pas qu’un lecteur d’écran peut utiliser l’appareil photo. Le personnel doit pouvoir fournir les informations de connexion de manière accessible.
Voici une base CSS pour une petite carte au format A6. Les navigateurs et les imprimantes diffèrent : vérifiez l’aperçu et adaptez-le au papier et aux marges de votre imprimante.
* { box-sizing: border-box; }
body {
margin: 0;
padding: 1rem;
font: 16px/1.4 system-ui, sans-serif;
color: #17212b;
background: #f3f6f9;
}
.guest-card {
width: min(100%, 420px);
margin: 0 auto;
padding: 18px;
text-align: center;
background: white;
border: 1px solid #17212b;
border-radius: 8px;
}
.guest-card h1 { margin: .2em 0; }
.guest-card img {
display: block;
width: min(100%, 260px);
height: auto;
margin: 1rem auto;
background: white;
}
.guest-card dl { text-align: left; }
.guest-card dl div { display: flex; gap: 1rem; margin: .4rem 0; }
.guest-card dt { min-width: 6rem; font-weight: 700; }
.guest-card dd { margin: 0; overflow-wrap: anywhere; }
.help { font-size: .95rem; }
@page { size: A6; margin: 10mm; }
@media print {
body { padding: 0; background: white; color: black; font: 11pt/1.3 sans-serif; }
.guest-card {
width: 100%; margin: 0; padding: 0;
border: 0; border-radius: 0;
break-inside: avoid;
}
.guest-card h1 { font-size: 18pt; }
.guest-card p { margin: 2mm 0; }
.guest-card img { width: 40mm; max-width: 100%; margin: 3mm auto; }
.guest-card dl { margin: 3mm 0; }
.guest-card dl div { flex-wrap: wrap; gap: 1mm 3mm; margin: 1.5mm 0; }
}
Ne faites pas dépendre la carte d’un fond coloré ou d’une image visible uniquement avec une option d’impression particulière. Le code QR doit être un véritable élément <img>, pas une image d’arrière-plan que le navigateur pourrait supprimer. print-color-adjust: exact demande un rendu fidèle des couleurs, mais les réglages de l’utilisateur et le comportement de l’imprimante peuvent l’emporter.
Choisir la taille selon la distance réelle de lecture
Une image de 300 pixels ne fait pas automatiquement un bon code imprimé. Le résultat dépend du nombre de modules QR, de la taille physique, de la résolution d’impression, du contraste, de la mise au point et de la distance de lecture.
Le CSS d’impression ci-dessus commence à 40 mm de côté, zone de silence comprise. C’est un point de départ pour la mise en page, pas un minimum garanti : testez depuis l’endroit où les visiteurs se tiendront et augmentez la taille si nécessaire. Le générateur propose des tailles allant jusqu’à 2 048 pixels, avec un export réel arrondi vers le bas pour conserver des modules en pixels entiers ; une source plus grande aide à garder des bords nets à la taille imprimée prévue. N’agrandissez pas une petite image jusqu’à rendre ses contours flous.
Consultez l’aperçu d’impression et imprimez un exemplaire. Vérifiez que le découpage conserve toute la zone de silence, que les marges de l’imprimante ne rognent pas l’image et que l’encre est assez sombre. Pour une carte posée sur une table, testez aussi les reflets et l’éclairage intérieur.
Tester le parcours complet, pas seulement l’image
La question est de savoir si les visiteurs peuvent rejoindre le réseau. L’apparition d’une boîte de dialogue Wi-Fi n’est qu’une étape intermédiaire.
Oubliez toute connexion enregistrée sur les téléphones de test avant le scan, afin que des identifiants mémorisés ne masquent pas un mauvais mot de passe dans le code. Avant d’imprimer cinquante copies, essayez cette matrice :
| Test | Résultat attendu |
|---|---|
| Téléphone Android récent | Détecte le code et rejoint le bon SSID |
| iPhone récent | Reconnaît le réseau prévu et propose la connexion lorsque le format est pris en charge |
| Ancien téléphone invité | Dispose d’une solution de saisie manuelle si le format QR n’est pas pris en charge |
| Exemplaire imprimé à la distance prévue | Se lit sans tentatives répétées |
| Routeur après changement de mot de passe | L’ancienne carte échoue comme prévu, la nouvelle fonctionne |
| Réseau avec portail captif | Les visiteurs comprennent la seconde étape d’identification |
Vérifiez le nom du réseau connecté sur le téléphone, puis ouvrez une page HTTPS pour contrôler l’accès effectif à Internet. Le format QR ne contourne pas les portails captifs et n’autorise pas les appareils bloqués par le routeur.
Pour découvrir l’outil, consultez la présentation du générateur gratuit de codes QR Wi-Fi. Pour approfondir le dimensionnement des images sur le Web, lisez notre guide des images adaptatives qui économisent de la bande passante.
Garder la carte à jour et maîtriser le partage des identifiants
Une personne doit remplacer chaque copie physique ou numérique après le changement du mot de passe invité. Notez les emplacements des affiches, la version actuelle et les anciens PDF ou e-mails qui contiennent encore le code précédent. Une image QR statique ne change pas avec le mot de passe du Wi-Fi.
Ne publiez pas un code contenant un mot de passe sur une page sans restriction d’accès, sauf si vous acceptez de partager ce secret avec tous ses lecteurs. Pour un réseau réservé aux visiteurs, distribuez la carte sur place ou faites fournir les informations par le personnel. La séparation avec les appareils de confiance et les réglages du routeur comptent davantage que le fait de cacher le mot de passe dans un motif.
Une bonne carte offre plusieurs possibilités aux visiteurs et une procédure de remplacement claire au personnel. Cela vaut davantage qu’une image QR très élaborée.