Psychologia kolorów — wybieranie palety bez obietnic konwersji

Kolor jest decyzją projektową, nie gwarancją konwersji

Barwy pomagają budować hierarchię i odróżniać elementy. Nie ma jednak uniwersalnej tabeli, z której wynika, że czerwony zawsze sprzedaje lepiej, niebieski zawsze budzi zaufanie, a różowy należy kierować wyłącznie do kobiet. Kontekst, doświadczenie i kultura zmieniają interpretację.

Przegląd badań nad psychologią kolorów opisuje ograniczenia metod i znaczenie kontekstu. Nie uzasadnia stałych obietnic „80% rozpoznawalności” lub „62–90% decyzji wyłącznie przez kolor” dla dowolnej marki. Elliot: przegląd badań.

Modele koloru

Ekrany opisuje się między innymi przez RGB; tradycyjne malarskie koło czerwony–żółty–niebieski nie jest uniwersalnym modelem mieszania barw. W CSS zapis HSL określa odcień, nasycenie i jasność. HSL lightness nie jest tym samym co HSV value ani luminancja używana do liczenia kontrastu. MDN: wartości kolorów.

Próbnik kolorów pomaga odczytać zapis koloru. Paleta kolorów daje warianty do dalszej oceny; wygenerowana harmonia nie gwarantuje czytelności.

Jak budować paletę

• Monochromatyczna: jeden odcień z różnymi jasnościami i nasyceniami.
• Analogiczna: odcienie sąsiadujące na wybranym kole.
• Komplementarna: odcienie po przeciwnych stronach tego koła.
• Triadyczna: trzy odcienie rozłożone co około 120 stopni.

To metody poszukiwania, nie nakazy. Kolory komplementarne nie muszą mieć wystarczającego kontrastu luminancji. Zasada 60–30–10 jest luźną wskazówką kompozycyjną; projekt z większą liczbą kolorów może być poprawny, a trzy źle dobrane barwy mogą być nieczytelne.

Zacznij od ról: tło, powierzchnia, tekst, akcja, błąd, sukces. Zdefiniuj ich warianty dla stanów hover, focus i disabled oraz dla jasnego i ciemnego motywu. Użyj w projekcie rzeczywistych etykiet i danych.

Gradient i dostępność

Gradient może być liniowy, radialny lub stożkowy. Nie ma zakazu używania go jako dużego tła; trzeba ocenić kompozycję i kontrast tekstu we wszystkich punktach, na których się pojawia. Kod CSS zajmuje bajty i wymaga renderowania, choć może zastąpić dodatkowy plik graficzny.

Sprawdzacz kontrastu mierzy parę barw. WCAG AA dla zwykłego tekstu wymaga co do zasady 4,5:1, a dla dużego 3:1. Tekst duży to co najmniej 18 pt albo 14 pt pogrubione. Logotypy mają wyjątek w tym kryterium. Zgodność samej pary kolorów nie oznacza zgodności całej strony. W3C: kontrast.

Nie polegaj wyłącznie na kolorze błędu: dodaj komunikat lub ikonę. Symulator zaburzeń widzenia jest pomocniczy, a nie certyfikujący.

Sprawdzenie wyboru

Przetestuj paletę na rzeczywistym interfejsie, z powiększeniem i różnymi ekranami. Jeśli porównujesz konwersję, zdefiniuj metrykę, wielkość próby i inne warunki eksperymentu. Nie przypisuj wyniku samej barwie, kiedy jednocześnie zmienił się tekst lub układ. Zapisz wybrane role i wartości w dokumentacji, aby zachować spójność.