Colori dei QR code che si scansionano ancora

Lo scanner legge il contrasto, non il colore

Uno scanner non vede il rosso o il blu. Riduce l'immagine in scala di grigi e cerca una differenza chiaro-scuro tra i moduli e lo sfondo. Qualsiasi coppia di colori funziona se il gap di luminanza è abbastanza ampio, e qualsiasi coppia fallisce se non lo è — anche coppie che al tuo occhio sembrano nettamente diverse.

La misura utile è il rapporto di contrasto, lo stesso dell'accessibilità web. Nero su bianco è 21:1. In stampa, punta a 7:1 o meglio e tratta tutto sotto 4:1 come un codice che fallirà da qualche parte: una stanza buia, una fotocamera economica, un'etichetta consumata, un telefono tenuto di sbieco.

Tieni il codice più scuro dello sfondo

Moduli scuri su sfondo chiaro è ciò che ogni decoder si aspetta. È ciò che descrive la specifica, ed è ciò che scanner hardware, telefoni vecchi e scanner in-app assumono prima di tentare qualsiasi acrobazia.

I codici invertiti — moduli chiari su sfondo scuro — funzionano su molti telefoni moderni. La fotocamera iOS e Google Lens di solito li gestiscono. Ma tanti scanner in-app, Android più vecchi e quasi ogni scanner laser o imager dedicato non invertono, così un codice invertito ti fa perdere in silenzio una fetta di pubblico, senza messaggio di errore e senza modo di saperlo.

Se il progetto ha davvero bisogno di una superficie scura, non invertire. Stampa una lastra chiara dietro il codice — un pannello bianco o crema con tutta la zona silenziosa dentro — e tieni i moduli scuri. Sembra voluto e scansiona ovunque.

Abbinamenti di colore sicuri e rischiosi

I rapporti di contrasto sotto sono approssimativi e calcolati alla maniera WCAG, colore del codice contro colore di sfondo. Tutto ciò che sta nella fascia sicura ha margine per la cattiva luce e le fotocamere economiche.

Perché il rosso è il recidivo

Il rosso porta pochissima luminanza rispetto a quanto urla. Il rosso puro su nero misura circa 5:1 sulla carta ma crolla nella pratica, perché il canale rosso della fotocamera è il più rumoroso e l'illuminazione calda da interni sposta il bilanciamento del bianco ulteriormente contro di lui. Il rosso scuro su nero arriva vicino a 2:1 e semplicemente non decodifica.

La stessa trappola prende giallo e arancione dall'altro capo. All'occhio sembrano brillanti, così i designer li abbinano al bianco, dove il gap di luminanza è quasi zero. Giallo su bianco è circa 1,4:1 — un codice che vedi benissimo e che uno scanner non legge affatto.

I pattern di ricerca non sono decorazione

I tre quadrati grandi agli angoli sono i pattern di ricerca, e un quadrato di allineamento più piccolo sta in basso a destra su tutti i codici tranne i più piccoli. Lo scanner li usa per localizzare il codice, capirne l'orientamento e correggere l'angolo prima di leggere un solo modulo di dati.

Devono restare la parte più scura e ad alto contrasto dell'immagine. Tingerli di un accento più chiaro, riempirli con un gradiente, contornarli con un tratto sottile o farci sovrapporre un logo o una foto sono tutti modi affidabili di costruire un codice che sta benissimo e scansiona a intermittenza.

Restilizzarne la forma è un altro discorso ed è lecito. I pattern di ricerca arrotondati o circolari tengono lo stesso rapporto chiaro-scuro cambiando il contorno, ed è per questo che esistono le opzioni di stile. Cambiarne il contrasto è la cosa da evitare.

Gradienti, foto e trasparenza

Un gradiente sui moduli è sicuro solo se ogni passaggio supera il tuo pavimento di contrasto rispetto allo sfondo. Un gradiente che va dal blu navy profondo all'azzurro cielo scansionerà a un capo del codice e fallirà all'altro, il che è peggio di un fallimento netto perché supera il tuo primo test.

• Tieni i gradienti in una gamma stretta e scura — per esempio #1E1B4B a #4338CA, mai dal blu navy al bianco.
• Applica i gradienti solo ai moduli. Lascia lo sfondo di un solo colore chiaro piatto.
• Non stendere mai un codice direttamente su una fotografia. Mettilo su una lastra chiara piena, con tutta la zona silenziosa dentro quella lastra.
• Evita i codici semitrasparenti su video o immagini. Lo sfondo si muove e il contrasto va con lui.

Usare i colori del brand senza rompere lo scan

La maggior parte delle palette contiene qualcosa di abbastanza scuro da funzionare. Prendi il colore più scuro del brand, confrontalo col bianco, e se supera 7:1 puoi costruire l'intero codice da quello e restare comunque fedele al brand.

Se il colore del brand è chiaro o di mezzotono, spendilo altrove rispetto ai moduli: come sfondo dietro un codice quasi nero, come cornice o pannello intorno, come testo di invito all'azione sotto, o come logo al centro. Il codice resta scuro e tutto intorno porta il brand.

Un logo al centro aggiunge un vincolo suo. Tienilo sotto circa il 20-25 percento dell'area del codice e alza la correzione d'errore a Q (circa il 25 percento di recupero) o H (circa il 30 percento) così i moduli coperti si possono ricostruire.

Come controllare prima di stampare

Tre controlli prendono quasi tutto, e tutti richiedono meno tempo di una ristampa.

• Passa i due valori hex in qualsiasi checker di contrasto WCAG. Sotto 4:1, cambia qualcosa. Tra 4:1 e 7:1, testa duro prima di impegnarti.
• Fai uno screenshot del codice e desaturalo in scala di grigi. Se moduli e sfondo si confondono in grigio, è esattamente ciò che ottiene lo scanner.
• Stampa al formato finale sul supporto finale e scansiona con tre telefoni, alla distanza reale, nella luce reale — incluso uno scanner in-app, più severo della fotocamera nativa.