Logotypy w kolorze czy w skali szarości: zasady projektowe i testy

Logotypy w skali szarości to domyślny wybór na stronach B2B i SaaS, bo tworzą spokojny, spójny pas, który nie konkuruje z przyciskiem wezwania do działania. Kolor ma przewagę, gdy barwa jest częścią rozpoznawalności marki, gdy znaków jest niewiele albo gdy pokazujesz logotypy płatności w sklepie. Wybór zależy od roli sekcji, a ostateczną odpowiedź daje test.

Kolor czy skala szarości: porównanie wariantów

Oba warianty mają swoje miejsce. Poniższa tabela zestawia ich mocne i słabe strony w typowych zastosowaniach.

Tabela pokazuje, że wybór nie jest kwestią gustu, tylko roli sekcji. Pas klientów pod nagłówkiem ma wspierać główny komunikat strony, a znaki płatności przy koszyku – zostać rozpoznane w ułamku sekundy. Ogólne zasady projektowania sekcji opisujemy w przewodniku po logotypach klientów na stronie.

Dlaczego strony B2B wybierają logotypy w skali szarości

Pierwszym powodem jest hierarchia wizualna. Kolor przyciąga wzrok, a element wyróżniający się na tle pozostałych zapamiętujemy lepiej – psychologia nazywa to efektem izolacji lub efektem von Restorff, od nazwiska badaczki, która opisała go w 1933 r. Na stronie, gdzie najważniejszy jest przycisk „Umów demo”, kilka jaskrawych logotypów tuż pod nim rozprasza uwagę. Szary pas zostawia kolor dla elementów, które mają skłonić do działania.

Drugi powód to spójność. Logotypy klientów projektowano niezależnie od siebie, więc obok granatowego znaku banku stoi pomarańczowy znak sieci handlowej i zielony – firmy energetycznej. Taki zestaw wygląda przypadkowo, a pierwsze wrażenie powstaje błyskawicznie. Gitte Lindgaard i współautorzy wykazali w 2006 r. (czasopismo „Behaviour & Information Technology”), że ocena atrakcyjności wizualnej strony formuje się już po 50 milisekundach ekspozycji. Z kolei w badaniu Stanford Persuasive Technology Lab i Consumer WebWatch z 2002 r. (2684 uczestników) 46,1% komentarzy o wiarygodności stron dotyczyło ich wyglądu.

Trzeci powód jest strategiczny. Logotypy klientów są tłem, które potwierdza wiarygodność, a nie główną treścią strony. Wersja w skali szarości komunikuje: „to są fakty, nie reklama tych firm”.

Kiedy logotypy w kolorze działają lepiej

Skala szarości nie zawsze wygrywa. Kolor ma przewagę w kilku sytuacjach:

• Marka jest rozpoznawana po barwie. Niektóre znaki bez koloru tracą sporą część rozpoznawalności, zwłaszcza gdy ich kształt jest prosty, a nazwa krótka.
• Logotypów jest tylko dwa–trzy. Przy małej liczbie znaków problem chaosu kolorystycznego nie występuje, a każdy logotyp zyskuje na wyrazistości.
• Odbiorca szuka konkretnego znaku. W sklepie internetowym klient przy wyborze płatności szuka znajomego logo operatora, a przy dostawie – swojego kuriera. Tu kolor pomaga, co opisujemy w artykule o pasku zaufania w e-commerce i w tekście o tym, czy odznaki płatności i bezpieczeństwa nadal zwiększają konwersję.
• Strona jest monochromatyczna. Jeśli cały projekt opiera się na czerni i bieli, kilka kolorowych logotypów może stać się świadomym akcentem.
• Strona kierowana do odbiorców lokalnych. Znaki lokalnych firm i instytucji rozpoznaje się często po barwach, a nie po kształcie.

Istnieje też trzecia droga: wszystkie logotypy w jednym kolorze, ale nie szarym, tylko dopasowanym do palety strony – na przykład w ciemnym granacie używanym w nagłówkach. Pas zachowuje spójność wersji monochromatycznej, a jednocześnie lepiej wtapia się w projekt niż neutralna szarość. Wymaga to jednak zgody właścicieli znaków, bo tak przekolorowana wersja rzadko jest przewidziana w księdze znaku. Bezpieczniej stosować ją do logotypów, które mają oficjalny wariant „jednobarwny w dowolnym kolorze”.

Zasady projektowe sekcji z logotypami

Jedna wersja dla całej sekcji

Najgorszym rozwiązaniem jest mieszanie wariantów: część znaków w kolorze, część w szarości. Odbiorca odczyta kolorowe logotypy jako ważniejsze, nawet jeśli to przypadek wynikający z braku pliku monochromatycznego. Jeśli zostawiasz kolor, to dla wszystkich znaków w sekcji.

Wyrównanie optyczne zamiast równej wysokości

Logotypy mają różne proporcje: poziome znaki typograficzne, kwadratowe sygnety, wysokie herby. Ustawienie ich na tej samej wysokości w pikselach sprawia, że poziome nazwy wyglądają na ogromne, a kwadratowe – na małe. Lepsza metoda to wyrównanie „na oko” do podobnej powierzchni i masy wizualnej, a następnie sprawdzenie efektu z odległości lub po rozmyciu zrzutu ekranu. Im mniej znaków w rzędzie, tym łatwiej utrzymać tę równowagę – to jeden z argumentów za krótkimi pasami, które omawiamy w tekście o tym, ile logotypów pokazać. W wersji kolorowej wyrównanie jest trudniejsze, bo ciemne i nasycone znaki wydają się większe od jasnych.

Odstępy i pole ochronne

Księgi znaku zwykle określają minimalny wolny obszar wokół logo. Zachowaj go dla każdego znaku i ustaw równe odstępy między nimi. Ciasno upakowany pas wygląda jak reklama sponsorów na banerze sportowym.

Format, wydajność i tryb ciemny

Najlepszym formatem jest SVG: zachowuje ostrość na każdym ekranie, mało waży i pozwala łatwo przygotować wersję jasną na ciemne tło. Kilkanaście dużych plików PNG w pasie logotypów potrafi niepotrzebnie obciążyć stronę i pogorszyć wskaźniki Core Web Vitals. Podobny problem dotyczy innych elementów zaufania, zwłaszcza wczytywanych z zewnętrznych serwerów – analizujemy go w tekście o widżetach opinii a szybkości strony. Zawsze podawaj wymiary obrazów w kodzie, aby pas logotypów nie przesuwał treści podczas ładowania. Jeśli strona ma tryb ciemny, przygotuj białe wersje znaków – szare logotypy przygotowane na białe tło na ciemnym tle znikają.

Efekt najechania kursorem

Popularny zabieg polega na pokazaniu koloru po najechaniu kursorem. Na ekranach dotykowych ten efekt nie istnieje, więc nie może być jedynym sygnałem, że logo prowadzi do case study. Jeśli znaki są klikalne, dodaj podpis lub ikonę strzałki. Ruchome paski logotypów sprawiają z kolei dodatkowe problemy, które opisujemy przy animowanych karuzelach logotypów.

Czy wolno zmienić kolor cudzego logo?

Logo klienta jest jego znakiem towarowym, a księgi znaku zwykle precyzyjnie określają dopuszczalne warianty kolorystyczne. Większość firm przewiduje wersję monochromatyczną – czarną, białą, czasem szarą – właśnie na potrzeby zestawień z innymi znakami. Zmiana kolorów poza tymi wariantami, rozciąganie, obracanie czy dodawanie efektów zwykle są zabronione.

W praktyce oznacza to trzy zasady:

1. Poproś klienta o oficjalne pliki w wersji monochromatycznej albo pobierz je z jego materiałów prasowych.
2. Nie stosuj automatycznego filtru skali szarości na wersji kolorowej. Filtr zamienia barwy w odcienie szarości o różnej jasności, przez co elementy znaku mogą się zlewać lub tracić kontrast.
3. Jeśli klient nie ma wersji monochromatycznej, zapytaj, czy akceptuje twoją propozycję, i zachowaj jego potwierdzenie.

Sama zgoda na publikację logo to osobna kwestia, którą omawiamy w tekście o tym, czy można użyć logo klienta bez zgody.

Kontrast i dostępność szarych logotypów

Wytyczne dostępności treści internetowych WCAG 2.1 w kryterium 1.4.3 wymagają kontrastu co najmniej 4,5:1 dla zwykłego tekstu, ale wprost zwalniają z tego wymogu tekst będący częścią logo lub nazwy marki. Nie oznacza to jednak dowolności. Jasnoszary znak na białym tle, który wygląda elegancko na monitorze projektanta, na tańszym ekranie w słońcu po prostu znika. Logo, którego nie da się odczytać, nie buduje żadnego zaufania.

Dwie zasady obowiązują zawsze. Każdy logotyp potrzebuje tekstu alternatywnego z nazwą firmy, a sekcja – nagłówka, dzięki któremu użytkownik czytnika ekranu wie, czym jest ten zestaw. Szczegóły techniczne opisujemy w artykule o dostępności sekcji z logotypami.

Jak przetestować logotypy w kolorze i w skali szarości

Hipoteza stojąca za szarymi logotypami brzmi: „mniej rozpraszają, więc więcej osób kliknie przycisk”. Hipoteza za kolorem: „są lepiej rozpoznawane, więc mocniej budują zaufanie”. Obie da się sprawdzić, ale trzeba dobrać metodę do ruchu.

1. Test A/B. Wersja A ma logotypy szare, wersja B – kolorowe; reszta strony jest identyczna. Główną miarą powinna być konwersja przycisku lub formularza, a nie kliknięcia w logotypy. Procedurę opisuje poradnik o testowaniu elementów zaufania na stronie, a podstawy metody – hasło test A/B.
2. Kontrola wyniku. Różnice między wariantami kolorystycznymi są zwykle niewielkie, więc łatwo uznać przypadek za efekt. Zanim ogłosisz zwycięzcę, sprawdź istotność statystyczną w kalkulatorze testu A/B.
3. Test pięciosekundowy. Przy małym ruchu pokaż kilkunastu osobom z grupy docelowej obie wersje przez pięć sekund i zapytaj, jakie firmy zapamiętały i jak oceniają wiarygodność dostawcy. To nie zastąpi testu A/B, ale wychwyci problemy z czytelnością.

Checklista projektowa sekcji z logotypami

1. Zdecyduj o wariancie dla całej sekcji: monochromatyczny w pasie klientów B2B, kolorowy przy płatnościach i dostawach.
2. Zbierz oficjalne pliki monochromatyczne od klientów lub z ich materiałów prasowych.
3. Nie używaj automatycznego filtru skali szarości na kolorowych znakach.
4. Wyrównaj logotypy optycznie i zachowaj pole ochronne z księgi znaku.
5. Użyj plików SVG i przygotuj białe wersje na ciemne tła.
6. Sprawdź czytelność na tanim telefonie i przy pełnej jasności otoczenia.
7. Uzupełnij teksty alternatywne nazwami firm.
8. Jeśli ruch na to pozwala, przetestuj wariant szary i kolorowy na konwersji głównego przycisku.