arrow_backBlog
·7 min basa·Super QR Code Generator Team

Kulay at Contrast ng QR Code: Mga Alituntunin para Manatiling Nase-scan

Maling brand colors ang magpapababa ng scan rate ng iyong QR code. Alamin ang tamang contrast ratio at color combinations para laging gumana ang scanning.

disenyo ng qr codebrandingscannability
Kulay at Contrast ng QR Code: Mga Alituntunin para Manatiling Nase-scan
AI-generated

Ang kulay ang pinakakaraniwang dahilan kung bakit nabibigo ang mga branded na QR code. Pinili ng designer ang brand palette, maganda ang hitsura sa mockup, at pagkatapos ay hindi na gumagana sa totoong mundo — dahil masyadong mababa ang contrast ratio o nalilito ang camera ng algorithm nito sa edge detection. Ibinibigay ng gabay na ito ang mga tiyak na alituntunin para ang iyong branded QR code ay parehong nasa brand at maaasahang nase-scan.

Bakit Nasira ng Kulay ang mga QR Code

Ang isang QR scanner — maging dedicated app o native camera ng telepono — gumagana ito sa pamamagitan ng paghahanap ng mataas na contrast na transisyon sa pagitan ng mga maitim na module (ang maliliit na parisukat) at ng maliwanag na background. Hindi lang ito naghahanap ng "itim at puti." Naghahanap ito ng masusukat na pagkakaiba sa luminance.

Kapag bumaba ang pagkakaibang iyon ng luminance sa ibaba ng maaasahang threshold, dalawang bagay ang nangyayari:

  • Ang mga finder pattern (ang tatlong malalaking parisukat sa sulok) ay mahirap hanapin.
  • Ang mga indibidwal na module ay nagiging malabo, na nagdudulot ng mga error sa decoding.

Ang resulta ay hindi pare-parehong scanning: gumagana sa matinding sikat ng araw, hindi gumagana sa loob ng bahay, o hindi gumagana sa matte na packaging ngunit gumagana sa glossy na screen.

Ang Pangunahing Alituntunin: Maitim na Modules sa Maliwanag na Background

Ang pinakamahalagang alituntunin sa disenyo ng kulay ng QR code ay panatilihing mas maitim ang mga module kaysa sa background — palagi. Ang pag-invert nito (maliwanag na modules sa maitim na background) ay magpapabigo sa karamihan ng camera ng telepono at maraming QR app, dahil ang QR standard ay itinayo batay sa pagpapalagay na maitim-sa-maliwanag.

Kung gumagamit ang iyong brand ng maitim na background bilang pangunahing kulay, mayroon kang dalawang pagpipilian:

  1. Ilagay ang QR code sa loob ng puting o maliwanag na "quiet zone" na kahon na umaabot ng hindi bababa sa 4 na module sa lahat ng gilid.
  2. Gamitin ang maliwanag na bersyon ng iyong brand color bilang kulay ng module laban sa puting background, sa halip na i-invert ang buong code.

Huwag kailanman gumamit ng maitim na background na may maitim na modules. Ito ang pinaka-karaniwang pagkakamali sa pag-print na nakikita namin sa packaging.

Minimum na Contrast Ratio

Ang Web Content Accessibility Guidelines (WCAG) ay nagtatakda ng contrast ratio na 4.5:1 bilang minimum para sa nababasang teksto. Para sa mga QR code, ang ratio na hindi bababa sa 4:1 sa pagitan ng kulay ng module at kulay ng background ay isang praktikal na gumaganang minimum. Mas mataas, mas mabuti.

Maaari mong kalkulahin ang luminance contrast gamit ang anumang color contrast checker (karamihan ay libre online). Ilagay ang hex value ng iyong module color at background color at basahin ang ratio.

Mabilis na sanggunian ayon sa uri ng brand color

Kulay ng module Background Approx. contrast Nase-scan?
Itim (#000000) Puti (#FFFFFF) 21:1 Napakahusay
Maitim na navy (#0D1B2A) Puti ~18:1 Napakahusay
Maitim na berde (#1A5C2A) Puti ~10:1 Maganda
Katamtamang pula (#C0392B) Puti ~5:1 Marginal
Orange (#E67E22) Puti ~3:1 Madalas nabibigo
Dilaw (#F1C40F) Puti ~1.7:1 Nabibigo
Puti (#FFFFFF) Itim (#000000) 21:1 Nabibigo sa karamihang camera

Ang mga hanay ng orange at dilaw ay nagpapakita ng patibong na humuhuli sa maraming lifestyle at food brand: ang mainit at maliwanag na mga kulay ay mukhang matapang ngunit may mababang luminance contrast laban sa puti.

Pagtatrabaho sa mga Brand Color na May Mababang Contrast

Hindi mo kailangang talikuran ang iyong palette. Narito ang mga praktikal na solusyon.

Palaimin ang kulay ng module, hindi ang brand color

Kung ang iyong brand orange ay #E67E22, ang isang pinalaim na bersyon tulad ng #7D3E00 (maitim na brown-orange) ay nagpapanatili ng maligat na hue habang nakakaabot ng 9:1 contrast ratio laban sa puti. Ang iyong QR code ay pakiramdam na nasa brand nang hindi sinisira ang scanning.

Gamitin ang brand color nang pili

Ilapat ang iyong brand color sa tatlong finder pattern lamang (ang mga parisukat sa sulok) at iwanang itim ang mga data module. Nagbibigay ito ng malakas na branded na impresyon dahil ang mata ay naaakit sa mga sulok, habang pinapanatiling maaasahan ang data area.

Maraming QR code generator ang nagbibigay-daan sa iyo na itakda ang kulay ng finder pattern nang hiwalay mula sa kulay ng module — gamitin ang feature na ito.

Pumili ng may kulay na background sa halip na may kulay na modules

Ang bahagyang may kulay na background (halimbawa, isang 15% tint ng iyong brand blue) na may mga karaniwang itim na module ay maaaring maramdamang nasa brand habang nagpapanatili ng mahusay na contrast. Ang tint ay nagbibigay ng kahulugang brand color sa isang tingin; ang contrast ay nananatiling mataas para sa scanning.

Gradient at Multicolor na Modules

Ang mga gradient ay madalas na hinihiling. Ang panganib ay ang isang dulo ng gradient ay nawawalan ng contrast laban sa background kahit na maayos ang kabilang dulo.

Kung gusto mo ng gradient:

  • Subukan ang pinakamaliwanag na punto ng gradient laban sa iyong background, hindi ang average.
  • Iwasan ang mga gradient na dumadaan sa mainit na mid-tones (mga dilaw, maliwanag na orange) kahit sandali.
  • Panatilihing pahalang o radial ang mga gradient sa halip na patayo sa data area, para walang isang hanay ng mga module ang bumaba sa ibaba ng threshold.

Ang mga multicolor module design (iba't ibang hue sa buong code) ay may mas mataas na panganib at pinakamainam na iwanan sa mga print proof — palaging i-scan ang pisikal na print, hindi lang ang screen preview, dahil nagbabago ang mga kulay sa pag-print.

Mga Interaksyon ng Materyales at Finish

Ang color contrast na kinakalkula sa screen ay maaaring kumilos nang iba sa print. Bantayan ang:

  • Matte na laminate ay nagpapababa ng perceived contrast ng halos 10–15% kumpara sa gloss, dahil nagkakalat ito ng liwanag.
  • Kraft o uncoated na recycled na papel ay may maligat na dilaw-abuhon na tono. Idisenyo ang iyong quiet zone para tumugma sa kulay ng papel at muling kalkulahin ang contrast laban doon, hindi laban sa purong puti.
  • Foil o metallic na tinta ay reflective at epektibong lumilikha ng gumagalaw na background para sa camera. Iwasan ang mga ito para sa mga QR module; maayos ang mga ito para sa mga kapaligiran na elemento ng disenyo.

Pagsubok Bago Finalisahin

Gaano man kaganda ang iyong mga numero sa screen, palaging subukan ang pisikal na output:

  1. Mag-print sa aktwal na sukat ng paggamit (hindi mas malaki para sa mga layunin ng pag-proof).
  2. I-scan gamit ang hindi bababa sa tatlong device: isang mas lumang Android mid-range na telepono, isang kamakailang iPhone, at isang dedicated na QR app.
  3. Subukan sa aktwal na kapaligiran ng ilaw — ang QR sa mesa ng restaurant ay iba ang ilaw kaysa sa billboard sa direktang araw.
  4. Kung ang code ay nasa packaging, subukan sa ilalim ng karaniwang ilaw ng retail shelf, na madalas ay malamig na fluorescent o LED na may bahagyang pagbabago ng kulay.

Kung nabibigo ang isang device sa aktwal na kapaligiran, hindi katanggap-tanggap ang kombinasyon ng kulay anuman ang sinabi ng contrast calculator.

Mga Pangunahing Aral

  • Ang mga module ay dapat palaging mas maitim kaysa sa background — ang mga na-invert na QR code ay nabibigo sa karamihang camera.
  • Layunin ang hindi bababa sa 4:1 na luminance contrast ratio; sukatin ito gamit ang contrast checker gamit ang iyong eksaktong hex values.
  • Ang mga mainit na maliwanag na kulay (orange, dilaw, maliwanag na pula) ay mukhang matapang ngunit may mapanganib na mababang contrast laban sa puti.
  • Kung nabigo ang iyong brand color sa contrast check, palaimin ang kulay ng module sa halip na ganap na itapon ang brand palette.
  • Ilapat ang iyong brand color sa mga finder pattern para sa visual na epekto habang pinapanatiling maitim ang mga data module para sa pagiging maaasahan.
  • Palaging subukan ang pisikal na print sa tunay na sukat sa tunay na ilaw — ang mga screen preview ay hindi nagpapakita ng mga isyu sa contrast ng print o materyales.