Czy kod QR może być kolorowy?
9 min czytania
Tak, kod QR może być kolorowy, bo telefon nie szuka czerni i bieli, tylko wyraźnej różnicy jasności między kropkami a tłem. Bezpieczna zasada to ciemny kod na jasnym tle, kontrast co najmniej 3:1 (do druku lepiej 4,5:1) i pusty margines dookoła, a wtedy kolory, gradienty, kształty i logo działają.
W skrócie
- Kolor nie przeszkadza, przeszkadza brak kontrastu: kropki muszą być wyraźnie ciemniejsze od tła.
- linqr ostrzega poniżej 3:1, a gotowe style mają co najmniej 3,5:1.
- Jasny kod na ciemnym tle część aplikacji odczyta, a część nie. Bezpieczniej odwrotnie.
- Gradienty, serca i logo działają, jeśli narożniki są wyraźne, a wokół kodu jest pusty margines.
- Czytnik pod podglądem sprawdza każdą zmianę, ale przed drukiem zrób jeszcze wydruk testowy.
Spis treści
Kontrast kolorowego kodu QR: ile wystarczy
W uproszczeniu telefon zamienia zdjęcie kodu na obraz dwóch barw i szuka jasnych oraz ciemnych modułów. Sam kolor nie ma znaczenia, liczy się różnica jasności. Mierzy się ją współczynnikiem kontrastu z wytycznych dostępności WCAG: od 1:1 (ten sam kolor) do 21:1 (czerń na bieli). Tak samo liczy go linqr.
| Kolor kodu | Kontrast z bielą | Ocena |
|---|---|---|
Czarny #000000 | 21:1 | Najbezpieczniejszy |
Granatowy #0C1445 | 17,5:1 | Bardzo dobry |
Śliwkowy #4B1D6B | 12,5:1 | Bardzo dobry |
Niebieski #2B4AFF | 6:1 | Dobry |
Czerwony #CB272F | 5,4:1 | Dobry |
Pomarańczowy #EA580C | 3,6:1 | Na granicy, tylko na czystej bieli |
Zielony #22C55E | 2,3:1 | Za jasny, linqr ostrzeże |
Żółty #FFE45E | 1,3:1 | Nie zadziała |
W linqr ostrzeżenie Za mały kontrast pojawia się poniżej 3:1, a wszystkie gotowe style mają co najmniej 3,5:1. Do druku celuj w 4,5:1 i więcej. To reguła praktyczna: papier, farba i przyciemnione światło w lokalu potrafią zjeść część różnicy, którą widać na ekranie.
Jasny kod na ciemnym tle
Kod odwrócony, czyli jasne kropki na ciemnym tle, to najbardziej ryzykowny wybór. Część aplikacji odczyta go bez problemu, a część wcale, bo szuka ciemnych modułów na jasnym polu. Nie wiesz, czym zeskanuje go Twój klient, więc białe kropki na czarnej koszulce albo żółte na granatowym plakacie to ryzyko, którego łatwo uniknąć.
Przy takim kodzie linqr pokazuje uwagę „Jasny kod na ciemnym tle: część aplikacji go nie odczyta” i przycisk Zamień kolory. Styl Nocne kropki jest odwrócony celowo, dla ciemnych projektów. Przy ciemnym projekcie bezpieczniej dać jasne pole pod kod: białą plakietkę, ramkę albo naklejkę. Jeśli kod już wisi i nie działa, przejdź przez listę przyczyn w poradniku dlaczego kod QR nie działa.
Gradienty
Kod QR z gradientem wygląda nowocześnie i działa, jeśli oba końce gradientu są ciemne. Kłopot zaczyna się, gdy gradient przechodzi od granatu do jasnego błękitu: jedna połowa kodu ma dobry kontrast, a druga nie. linqr sprawdza kontrast każdego koloru gradientu z tłem, więc za jasny koniec też uruchomi ostrzeżenie.
- Łącz dwa ciemne kolory, na przykład fiolet i bordo jak w stylu Winogrono (oba co najmniej 7:1 z bielą).
- Liniowy gradient obrócisz suwakiem Kąt gradientu, a Radialny rozchodzi się od środka kodu.
- Tło zostaw jednolite i jasne, także wtedy, gdy kładziesz kod bez tła na własną grafikę.
Strefa ciszy wokół kodu
Kolorowy kod potrzebuje tego samego co czarny: pustego pasa dookoła, zwanego strefą ciszy. Po nim telefon poznaje, gdzie kod się zaczyna. W zakładce Więcej ustawisz Margines (strefa ciszy) od 0 do 8 modułów, a zalecane są 4. Kolorowa grafika, tekst albo krawędź ulotki tuż przy kropkach działa jak zabrudzenie. Przy tle Przezroczyste strefę ciszy tworzy to, co leży pod kodem, więc zostaw tam jasne, puste miejsce.
Kształty kropek i narożników
Kropki nie muszą być kwadratami. W linqr masz 12 kształtów kropek, 6 ramek narożników i 6 środków narożników, a każdy gotowy styl przechodzi testy automatyczne, które kodują i odczytują kod.
Najważniejsze są trzy duże kwadraty w rogach. Po nich telefon znajduje kod i ustala jego położenie, więc mogą być zaokrąglone, okrągłe albo w kształcie liścia, ale powinny zostać pełne i wyraźne. Reguła praktyczna: drobne kształty, jak gwiazdki czy krzyżyki, mają mniej koloru niż kwadraty, więc w małym wydruku potrzebują wyższego kontrastu. Kropki mogą być nawet sercami, ale cały kod zostaje kwadratem. Wszystkie kształty i ramki pokazujemy na stronie ładny kod QR z ramką.
Logo
Kolorowe logo w środku kodu to osobny temat, ale zasada jest podobna. Logo przykrywa część kropek, a korekcja błędów je odtwarza, więc linqr po dodaniu logo sam ustawia najwyższy poziom korekcji i pilnuje, żeby logo nie zasłoniło za dużo. Kolor logo nie musi pasować do kodu, za to kropki wokół niego muszą zachować kontrast z tłem. Rozmiary, tło logo i dobre praktyki opisujemy na stronie kod QR z logo.
Ramki z napisem
Ramka z napisem „ZESKANUJ MNIE” też może być kolorowa. Kolor ramki domyślnie przejmuje kolor kodu, a Kolor tekstu startuje od bieli, więc napis jest czytelny na ciemnej ramce. Jeśli wybierzesz jasną ramkę, zmień kolor tekstu na ciemny. Ramka nie zabiera kodowi marginesu: w jej środku zostaje pusty pas co najmniej 2 modułów.
Automatyczna kontrola w linqr
Nie musisz liczyć kontrastu ręcznie. Tak działa nasz generator kodów QR ze zmiennym linkiem: w zakładce Kolory ostrzeżenie Za mały kontrast pojawia się, gdy kolory za bardzo się zbliżą, a przycisk Popraw przyciemnia kod albo rozjaśnia tło. Pod podglądem prawdziwy czytnik odczytuje kod po każdej zmianie i pokazuje Skanuje się poprawnie albo Ten kod może się słabo skanować z poprawką, na przykład Zamień kolory.
Zacznij od gotowego stylu
W zakładce Style wybierz styl najbliższy Twoim barwom, na przykład Północ albo Terakota.
Ustaw kolor kodu
W zakładce Kolory wybierz kolor z palety albo wpisz własny. Na kropki daj najciemniejszy kolor marki.
Dobierz jasne tło
Biel, krem albo blady odcień marki. Tło ma być wyraźnie jaśniejsze od każdej kropki.
Sprawdź komunikat pod podglądem
Szukaj Skanuje się poprawnie. Ostrzeżenie usuniesz jednym kliknięciem poprawki.
Wydrukuj próbkę
Jeden wydruk w docelowym rozmiarze zeskanuj dwoma różnymi telefonami.
Zaprojektuj kolorowy kod QR
Wklej link, wybierz styl i kolory, a kontrola skanowania od razu powie Ci, czy kod zadziała.
Wklej swój linkNajczęstsze pytania
Czy kod QR może być biały?
Może, jeśli leży na ciemnym tle, ale to wybór z ryzykiem. Jasny kod na ciemnym tle część aplikacji odczyta, a część nie, bo szuka ciemnych kropek na jasnym polu. linqr pokazuje przy takim kodzie uwagę i przycisk Zamień kolory. Bezpieczniej postawić ciemny kod na białej plakietce albo w jasnej ramce, nawet w ciemnym projekcie.
Czy kod na czarnym tle zadziała?
Ciemny kod na czarnym tle nie zadziała, bo brakuje kontrastu. Jasny kod na czarnym tle odczyta tylko część aplikacji. Najpewniejsze rozwiązanie to jasne pole pod kodem: biały kwadrat z marginesem 4 modułów, a na nim ciemny kod. Na czarnej wizytówce czy koszulce wygląda to celowo, a telefon widzi zwykły, ciemny kod na jasnym tle.
Jakie kolory są najbezpieczniejsze?
Ciemne i nasycone na jasnym tle: czerń, granat, grafit, śliwka, bordo i ciemna zieleń. Każdy z nich ma kontrast z bielą powyżej 7:1, więc zniesie słabszy druk i przyciemnione światło. Czerwień i intensywny niebieski też działają, z kontrastem około 5-6:1. Na kropkach unikaj jasnej zieleni, żółci, pastelowego różu i jasnych szarości.
Czy kod QR może mieć kształt serca?
Kropki tak, cały kod nie. W zakładce Kształty wybierzesz kropki w kształcie serc, a styl Cukierek łączy je z różowo-fioletowym gradientem. Sam kod zostaje kwadratem, bo telefon szuka trzech kwadratowych narożników. Jeśli projekt ma być sercem, umieść kwadratowy kod wewnątrz serca i zostaw wokół niego pusty margines.
Czy kolorowy kod jest płatny?
Nie. W linqr kolory, gradienty, kształty, ramki i logo są w darmowym planie Free, razem z kontrolą skanowania. Free obejmuje 3 aktywne kody i pliki PNG, JPG, WEBP oraz SVG do 2048 px. Pro za 19,99 zł miesięcznie dodaje kody bez limitu i pliki PDF oraz EPS do druku, ale wygląd kodu jest w obu planach taki sam.
Jak sprawdzić kontrast kolorów kodu QR przed drukiem?
W linqr nie musisz liczyć go ręcznie. W zakładce Kolory ostrzeżenie Za mały kontrast pojawia się poniżej 3:1, a przycisk Popraw przyciemnia kod albo rozjaśnia tło. Kontrast liczymy wzorem WCAG, tym samym co narzędzia do sprawdzania dostępności. Do druku celuj w 4,5:1 i więcej, a na koniec zeskanuj próbny wydruk dwoma różnymi telefonami.
Jak wpisać kolor marki w kodzie HEX?
W zakładce Kolory wybierz Własny kolor i wpisz wartość w polu Kod HEX w formacie #RRGGBB, na przykład #0C1445 dla granatu. Tak samo ustawisz tło, a po włączeniu Inny kolor narożników także kolory trzech narożników. Na kropki daj najciemniejszy kolor z księgi znaku, a jasne barwy marki wykorzystaj jako tło albo w ramce.
Czy kolor kodu QR na wydruku wyjdzie taki sam jak na ekranie?
Rzadko co do odcienia. Ekran świeci, a papier odbija światło, więc drukarnia przelicza kolory na farby i część barw wychodzi ciemniej albo bardziej matowo. Dlatego do druku wybieraj kolory z zapasem kontrastu, co najmniej 4,5:1, a nie te na granicy 3:1. Przed dużym nakładem poproś o wydruk próbny i zeskanuj go w świetle, w jakim kod będzie wisiał.
Czy kod QR z gradientem skanuje się gorzej niż jednolity?
Nie, jeśli oba kolory gradientu są ciemne i mają dobry kontrast z tłem. Problem pojawia się, gdy gradient przechodzi w jasny odcień: ta część kodu staje się dla telefonu słabo widoczna. linqr sprawdza kontrast obu kolorów gradientu (Kolor początkowy i Kolor końcowy) i ostrzeże, gdy któryś jest za jasny. Tło zostaw wtedy jednolite i jasne.
Czy tło kodu QR może być kolorowe zamiast białego?
Tak, pod warunkiem że jest wyraźnie jaśniejsze od kropek. Dobrze sprawdzają się krem, blady beż, jasny błękit albo blady odcień barwy marki, jak żółte tło w stylu Zakreślacz z granatowym kodem. Unikaj tła ze zdjęciem, wzorem albo przejściem tonalnym, bo telefon widzi wtedy plamy zamiast równego pola. Tło ustawisz w zakładce Kolory.
Czy zmienię kolory kodu QR, który jest już wydrukowany?
Nie na papierze: wydruk ma kolory, z jakimi go wydrukowano. W linqr zmienisz kolory w karcie Wygląd zapisanego kodu, ale nowy wygląd trafi tylko do kolejnych pobrań, więc stare i nowe materiały mogą różnić się barwą. Obie wersje prowadzą przez ten sam krótki link i działają tak samo. Link docelowy zmienisz za to w każdej chwili, bez przedruku.