Psychologia kolorów dla stron docelowych o wysokiej konwersji

Kolor jest pierwszą rzeczą, którą przetwarza odwiedzający — zanim przeczyta jakiekolwiek słowo. Komunikuje branżę, wiarygodność i ton w milisekundach. Bezpośrednio wpływa również na czytelność tekstu, co z kolei wpływa na to, czy ludzie pozostają na stronie.

Ten post wyjaśnia, jak działa system palet PAGEnza i dlaczego ograniczenia, które nakładamy na wybór kolorów, faktycznie dają lepsze wyniki niż dawanie SI nieograniczonej swobody.

Problem z proszeniem SI o „wybranie ładnych kolorów”

Jeśli poprosisz LLM o wybranie kolorów dla strony internetowej, otrzymasz kody szesnastkowe. Czasami wyglądają razem dobrze. Czasami nie. Model nie ma wiarygodnego sposobu oceny, czy kolory faktycznie działają — czy tekst jest czytelny, czy paleta jest odpowiednia dla branży, czy kombinacja jest wizualnie spójna, a nie przypadkowo dopasowana.

Wyraźnie widzieliśmy ten problem we wczesnych testach. Nieograniczone generowanie kolorów dawało palety od doskonałych po całkowicie bezużyteczne. Brakowało spójności.

Rozwiązaniem było całkowite odebranie wyboru kolorów z rąk LLM i zbudowanie algorytmicznego systemu, który gwarantuje określone właściwości.

4-kolorowy system

Każda strona PAGEnza używa dokładnie czterech nazwanych kolorów:

ink — podstawowy kolor tekstu. Zawsze ciemny (wysoki kontrast jasności na tle). Używany do nagłówków, tekstu głównego i elementów interfejsu użytkownika, które muszą być czytelne.

bg1 — podstawowe tło. Zazwyczaj najjaśniejszy kolor w palecie. Używany do głównego tła strony i jasnych sekcji.

bg2 — drugorzędne tło. Tworzy wizualną różnorodność między sekcjami. Musi mieć inną temperaturę barwową niż bg1 — jeśli bg1 to ciepły kremowy, bg2 to chłodna szarość lub biel z niebieskim odcieniem.

accent — kolor marki. Używany do przycisków, linków, wyróżnień i elementów dekoracyjnych. Zazwyczaj najbardziej nasycony kolor w palecie.

To ograniczenie — cztery nazwane role, a nie dowolne kody szesnastkowe — sprawia, że system palet działa. SI nigdy nie decyduje, który kolor gdzie trafić; wybiera tylko, którą paletę użyć z predefiniowanego zestawu.

Jak organizowane są palety

Utrzymujemy ponad 20 grup palet, z których każda jest zbudowana wokół archetypu:

• Odważny: wysoki kontrast, nasycone akcenty — technologia, SaaS, fintech
• Miękki: stonowane, odbarwione — wellness, coaching, usługi kreatywne
• Luksusowy: prawie czarne tła z metalicznymi lub klejnotowymi akcentami — usługi premium, handel luksusowy
• Ziemisty: ciepłe neutralne z akcentami terakoty lub szałwii — żywność, zrównoważony rozwój, rzemiosło
• Ciemny: palety zorientowane na tryb ciemny — programiści, agencje, gry
• Neutralny: bezpieczny, profesjonalny — prawo, finanse, opieka zdrowotna

W każdej grupie znajduje się wiele palet o różnej temperaturze barwowej, poziomie nasycenia i odcieniach akcentów. System wybiera grupę na podstawie branży i archetypu, a następnie wybiera konkretną paletę w ramach grupy.

Kontrast WCAG: ograniczenie, które poprawia projekt

WCAG AA wymaga, aby zwykły tekst miał współczynnik kontrastu co najmniej 4,5:1 w stosunku do tła. Duży tekst wymaga 3:1. Elementy interaktywne wymagają 3:1 w stosunku do sąsiednich kolorów.

Każda paleta w naszym systemie jest walidowana pod kątem tych współczynników przed jej uwzględnieniem. W szczególności:

• ink musi osiągnąć kontrast ≥4,5:1 w stosunku do bg1, bg2 i dowolnej powierzchni, na której pojawia się tekst
• accent musi osiągnąć kontrast ≥3,0:1 w stosunku do bg1 i bg2 (do użycia jako tło przycisków)
• Walidacja wykorzystuje rzeczywiste obliczenia jasności — L = 0,2126R + 0,7152G + 0,0722B po korekcji gamma — a nie przybliżenia

Efektem jest to, że każda wygenerowana strona jest domyślnie czytelna. Ale jest też dodatkowa korzyść: projekty o wysokim kontraście lepiej konwertują. Przycisk, który jest wyraźnie widoczny, przyciąga więcej kliknięć niż ten, który zlewa się z tłem. Wymaganie dostępności okazuje się wymogiem konwersji.

Kontrast temperatury barwowej między sekcjami

Jeden szczegół, który łatwo przeoczyć: bg1 i bg2 muszą mieć kontrastujące temperatury barwowe. Jeśli oba tła są ciepłe, naprzemienne sekcje wydają się monotonne — strona wygląda jak jeden ciągły blok, a nie oddzielne obszary treści.

Zasada w naszym systemie: jeśli bg1 ma ciepły odcień (w kierunku pomarańczowym/żółtym lub ciepły neutralny, jak kremowy), bg2 musi być chłodny (w kierunku niebieskim/szarym). Jeśli bg1 to chłodna biel, bg2 może być ciepłą złamaną bielą.

Dlatego nasze sekcje wydają się odrębne nawet bez ciężkich separatorów lub cieni — sam przesunięcie temperatury tła tworzy wyraźne wizualne rozgraniczenie.

Logika kolorów specyficzna dla branży

Niektóre wybory kolorów są silnie zakodowane w branży. Odwiedzający mają oczekiwania zbudowane przez lata ekspozycji na strony internetowe w danej kategorii.

Opieka zdrowotna i wellness: niebieskie i zielone kolory sygnalizują zaufanie i spokój. Nasycone czerwienie i pomarańcze w tym kontekście odbierane są jako alarmujące.

Prawo i finanse: ciemne granaty, grafit, konserwatywne szarości. Jasne akcenty są dopuszczalne, ale muszą być powściągliwe. Zabawne palety podważają wiarygodność.

Żywność i hotelarstwo: ciepłe tony — terakota, bursztyn, kremowy — aktywują skojarzenia z apetytem. Chłodne, kliniczne palety wydają się niewłaściwe.

Technologia i SaaS: niebieskie kolory pozostają dominujące, ale jest większy zakres. Elektryczne niebieskie, indygo, a nawet fioletowe kolory odbierane są jako zaawansowane technologicznie. Czyste czarne tła sprawdzają się w przypadku narzędzi dla programistów.

Luksus i premium: kluczem jest powściągliwość. Ograniczony zakres kolorów, prawie czarne lub głębokie granaty jako kolory podstawowe, akcenty złota lub platyny. Wysoki kontrast, nigdy nasycony.

Wybór archetypu w Mandacie Projektowym dopasowuje branżę + typ biznesu do odpowiedniej grupy palet, dzięki czemu coach wellness nie otrzymuje tej samej palety co kancelaria prawna, nawet jeśli obie są opisane jako „profesjonalne”.

Co klienci mogą zmienić

Po wygenerowaniu klienci mogą edytować swoją stronę w Gutenberg. Wskaźnik wyboru koloru w edytorze pokazuje tylko cztery kolory marki — nic więcej. Oznacza to:

• Mogą zmieniać tła sekcji między bg1, bg2 i powierzchniami
• Mogą zmieniać kolory przycisków i linków między accent i ink
• Nie mogą wprowadzić dowolnego piątego koloru, który zepsuje paletę

Ograniczenie jest celowe. Najczęstszym sposobem, w jaki klienci psują profesjonalnie zaprojektowaną stronę, jest wybieranie kolorów z pełnego koła barw. Ograniczenie palety do czterech nazwanych kolorów uniemożliwia to bez zagłębiania się w kod.