QR code accessible : le contraste que 1 homme sur 12 ne distingue pas
Un QR code gris pâle sur fond beige passe très bien sur une maquette et échoue en conditions réelles. Contraste, zone de silence, taille et page de destination : les quatre points qui décident si votre code est utilisable par tout le monde, et comment les vérifier avant impression.
Quand on parle d'accessibilité d'un QR code, tout le monde pense à la taille. Trop petit, illisible. C'est vrai, mais c'est loin d'être le seul problème. Des dizaines de codes parfaitement dimensionnés, imprimés sur du beau papier glacé, restent difficiles à utiliser pour une partie des gens qui les croisent.
Le vrai problème se joue ailleurs : dans le contraste, et dans la page qui s'ouvre après le scan.
Le contraste, la barrière invisible
Un QR code gris foncé sur fond gris clair. Une élégance visuelle. Un désastre pratique.
Les règles d'accessibilité numérique (WCAG 2.1) fixent un ratio de contraste minimal de 4,5:1 entre un élément et son arrière-plan. Ce seuil a été pensé pour le texte, mais la logique s'applique directement à un QR code : le capteur du téléphone, comme l'œil, a besoin d'une séparation nette entre les modules sombres et le fond.
La déficience de vision des couleurs concerne environ un homme sur douze d'origine nord-européenne, selon les données couramment reprises par les organismes de santé publique. Ces personnes ne voient pas moins bien, elles distinguent moins bien certaines paires de couleurs. Un code bordeaux sur fond vert d'eau, qui semble contrasté à un designer, peut se rapprocher d'un aplat uniforme pour elles.
Ajoutez à ça les personnes en basse vision, les seniors, et simplement tout le monde en plein soleil ou dans un stationnement mal éclairé. La marge de sécurité que vous donne un fort contraste sert à bien plus de gens que la seule population handicapée.
Calculer le bon contraste
Le ratio se calcule à partir de la luminance relative des deux couleurs. Les validateurs WCAG en ligne font ce calcul en quelques secondes, gratuitement.
En pratique :
- Noir sur blanc : ratio 21:1, le choix le plus sûr
- Bleu marine sur blanc : généralement au-dessus de 7:1, acceptable
- Gris moyen sur blanc : souvent sous 4,5:1, à éviter
- Deux pastels ensemble : presque toujours insuffisant
La règle utile : si vous devez réfléchir pour savoir si le contraste passe, c'est qu'il ne passe pas.
Un point important sur la couleur : les modules doivent toujours être plus sombres que le fond. Les codes inversés (fond sombre, modules clairs) fonctionnent sur certains lecteurs récents, mais restent bien plus sensibles aux reflets sur papier glacé. Le sujet est détaillé dans QR code en couleur : le point de rupture du scan.
Zone de silence et dimensions minimales
La règle des 10 % (un code lu à 1 mètre mesure au moins 10 cm) est un bon point de départ, mais deux autres éléments comptent autant.
La zone de silence
C'est la marge vide autour du code. Sans elle, le lecteur peine à délimiter le carré et à le décoder. La spécification demande au moins 4 modules de marge de chaque côté, sans aucun élément graphique.
Beaucoup de maquettes collent le code directement sur une photo ou un motif. Le scan échoue de façon intermittente, ce qui est pire qu'un échec franc : personne ne comprend d'où vient le problème.
Les dimensions
En impression, comptez 2 cm de côté comme plancher absolu, pour un code tenu en main. À l'écran, environ 1,5 cm affiché. En dessous, même avec un contraste parfait, la détection devient laborieuse pour quelqu'un qui a du mal à stabiliser son téléphone.
Sur une carte de visite, 2 cm est le minimum réaliste. Pour une affiche vue à 2 mètres, il faut viser environ 20 cm. Ce n'est pas une préférence esthétique, c'est de l'optique.
Si vous produisez des codes en volume, la génération en masse depuis un CSV permet de fixer les paramètres de contraste et de taille une seule fois, pour tout le lot.
La page de destination, là où tout se joue
Le QR code n'est que la porte d'entrée. Une fois le scan effectué, l'utilisateur atterrit sur une page web, et c'est souvent là que la campagne échoue.
Les défauts les plus fréquents :
Texte trop petit. Un corps de 12 pixels sur mobile est pénible pour beaucoup de monde. Le plancher raisonnable est 16 pixels, qui est aussi la taille de base des navigateurs mobiles.
Contraste de texte insuffisant. Un gris pâle sur fond blanc est élégant sur une maquette et illisible sur un écran en extérieur. Appliquez au texte les mêmes exigences qu'au code.
Zones tactiles trop petites. Les boutons doivent faire au moins 44 pixels de côté, avec de l'espace autour. Deux liens collés l'un à l'autre condamnent l'utilisateur à viser au pixel près.
Redirections en cascade. Un code qui pointe vers un raccourcisseur qui redirige vers une autre URL allonge le chargement et multiplie les points de rupture. Sur un réseau mobile faible, ça suffit à faire abandonner.
La page doit être pensée pour le mobile d'abord, avec un contenu simple, des titres clairs et un objectif unique. Le même raisonnement s'applique aux campagnes de dons, comme détaillé dans QR code de don : de la page d'atterrissage au suivi des scans.
Le logo, ce faux ami
Ajouter un logo au centre d'un code réduit la surface lisible et force à monter le niveau de correction d'erreur, donc la densité de modules. Un code plus dense est plus exigeant en résolution d'impression et en stabilité de main.
Scénario illustratif, mais représentatif de ce qui se voit sur le terrain : un code de 3 cm, noir sur blanc, zone de silence respectée, fonctionne parfaitement. On y ajoute un logo en filigrane pour des raisons de marque. Le code passe toujours sur un téléphone récent tenu à 15 cm, et commence à échouer sur un appareil plus ancien ou tenu à bout de bras. La personne qui a le plus besoin que ça marche du premier coup est justement celle qui échoue.
Les trois règles à respecter si le logo est non négociable sont détaillées dans Logo sur QR code : 3 règles pour ne pas tuer le scan.
Les vérifications avant impression
- Contraste : calculez le ratio entre les modules et le fond. Minimum 4,5:1, visez 7:1.
- Taille : 2 cm en impression pour un support tenu en main, 10 % de la distance de lecture au-delà.
- Zone de silence : 4 modules de marge nette, sans motif ni texte.
- Support : évitez le papier brillant en éclairage direct, qui crée des reflets par-dessus le code.
- Test réel : imprimez à l'échelle 1:1 et scannez avec plusieurs appareils, dont un vieux téléphone, en lumière moyenne.
Ce dernier point est celui qui attrape le plus de problèmes. Un code qui passe sur un appareil bas de gamme en éclairage médiocre passera à peu près partout.
Les différences de rendu entre papier et écran méritent aussi attention, et sont couvertes dans QR code sur écran : pourquoi il ne scanne jamais pareil.
L'accessibilité comme critère de fiabilité
Un code accessible n'est pas un code bridé. C'est un code qui garde de la marge : marge de contraste, marge de taille, marge de tolérance aux mauvaises conditions. Cette marge sert d'abord les personnes en situation de handicap, et ensuite tout le monde.
Les correctifs coûtent presque rien. Le contraste se change en deux minutes dans le générateur. La taille s'ajuste avant l'export. La zone de silence se dégage dans la maquette. La page de destination se corrige avec quelques ajustements de CSS. Ce qui coûte cher, c'est un tirage de 50 000 affiches qu'il faut refaire.
Chez QR Code Agency, les codes se génèrent avec des paramètres de contraste élevé par défaut, et les statistiques de scan par appareil aident à repérer un problème avant qu'il ne coûte des conversions : quand les échecs se concentrent sur les vieux modèles, la cause est presque toujours la densité ou le contraste.
Par où commencer
Prenez le dernier QR code que vous avez mis en circulation. Passez ses couleurs dans un validateur de contraste WCAG, mesurez sa zone de silence, et ouvrez sa page de destination sur un téléphone en plein soleil.
Si un seul de ces trois tests échoue, vous savez déjà quoi corriger sur le prochain tirage.
À lire aussi
Keep reading
QR code avis Google : le piège des 30 secondes qui tue votre réputation
Un QR code d'avis mal placé ou mal chronométré peut faire chuter votre note Google au lieu de la monter. Voici où placer le code, à quel moment le présenter, et comment garder le scan fiable pour ne collecter que les bons avis.
Logo sur QR code : 3 règles pour ne pas tuer le scan
Ajouter un logo à un QR code introduit un risque technique que la plupart des outils ignorent. Trois règles simples, couverture, contraste et zone de silence, pour garder un code personnalisé qui scanne à tous les coups.
QR code en couleur : le point de rupture du scan
Un QR code coloré peut cesser de se scanner bien avant que les couleurs ne semblent problématiques. Contraste local, zone de silence et correction d'erreur : les trois réglages qui décident si votre code fonctionne une fois imprimé.