Zacznij od ustalenia, do czego kolory mają służyć. Potrzebujesz tła, czytelnego tekstu i sposobu wyróżnienia najważniejszych działań. Dopiero potem wybieraj odcienie. Dzięki temu paleta stanie się praktycznym zestawem do budowania strony, a nie tylko rzędem ładnych próbek.
Jeśli firma ma już kolory marki, wykorzystaj je jako punkt wyjścia. Nie każdy kolor z logo musi jednak trafić do tekstu albo przycisku. Jasny odcień może dobrze działać jako ozdoba, ale wymagać innego zastosowania, gdy ma przekazywać informację.
Przypisz kolorom konkretne role
Na początek wybierz cztery zastosowania:
- tło strony, na którym będzie czytana większość treści;
- tekst, używany w nagłówkach i akapitach;
- akcent, którym wyróżnisz główne działanie;
- tło pomocnicze, pozwalające oddzielić wybraną sekcję.
Nie jest to obowiązkowa liczba kolorów. To prosty sposób rozpoczęcia pracy. Jeśli później potrzebujesz kolejnego odcienia, zastanów się, co ma oznaczać. Czy ułatwi odczytanie informacji, czy tylko doda nową dekorację?
Przykładowa paleta do ćwiczenia, nie oficjalne kolory marki Manifo.
W przedstawionym przykładzie ciemny tekst jest przeznaczony na jasne tła. Niebieski akcent może posłużyć do przycisku z białą etykietą. Gdy zmienisz odcień, sprawdź ponownie zestawienie — podobny wygląd nie oznacza identycznej czytelności.
Sprawdzaj parę: tekst i jego tło
Kolor tekstu oceniaj zawsze razem z tłem, na którym wystąpi. Próbka oglądana osobno niewiele mówi o czytelności całego akapitu. Dotyczy to również napisów na zdjęciach: pod literami mogą znaleźć się zarówno jasne, jak i ciemne fragmenty.
W kryterium kontrastu WCAG 2.2 na poziomie AA próg dla zwykłego tekstu wynosi 4,5:1, a dla dużego tekstu 3:1. „Duży tekst” ma w tym kryterium określoną definicję, dlatego przy pierwszym sprawdzaniu palety wygodnie przyjąć 4,5:1 również dla nagłówków. Są wyjątki, a sam kontrast nie stanowi pełnego sprawdzenia dostępności strony. Wyjaśnienie kryterium kontrastu W3C.
W narzędziu do sprawdzania kontrastu wpisz kod koloru tekstu i kod tła. Jeśli wynik jest zbyt niski, przyciemnij tekst, rozjaśnij tło albo wybierz inną parę. Nie ograniczaj kontroli do głównego akapitu. Sprawdź również etykiety przycisków, podpisy zdjęć i drobne informacje w formularzach.
Co oznaczają kody HEX i RGB?
Kod koloru pozwala używać tego samego odcienia w różnych miejscach. Zamiast wybierać „mniej więcej ten sam niebieski” za każdym razem, zapisz jego wartość w notatce z paletą.
Popularny zapis HEX ma postać #2457C5. W tym sześciocyfrowym wariancie kolejne pary opisują udział czerwonego, zielonego i niebieskiego. Ten sam kolor można zapisać jako rgb(36, 87, 197). Wartości odnoszą się tutaj do składowych w zakresie od 0 do 255. To dwa sposoby opisania tej samej próbki; istnieją też inne obsługiwane zapisy kolorów. Dokumentacja kolorów RGB w CSS.
Nie musisz ręcznie przeliczać wartości. Ważne, aby konsekwentnie korzystać z ustalonego zestawu i wiedzieć, który odcień jest przeznaczony do której roli. Przy palecie zapisz na przykład: „#17233A — główny tekst”, a nie tylko sam kod.
Zobacz paletę na prawdziwej sekcji
Przygotuj fragment strony zawierający nagłówek, dwa krótkie akapity, zdjęcie i przycisk. Dopiero na takim przykładzie oceń, czy kolory pomagają uporządkować treść.
Wyobraźmy sobie fikcyjną pracownię ceramiczną. Na jasnym tle pokazuje zdjęcie naczyń, ciemnym tekstem opisuje warsztat, a niebieskim przyciskiem wyróżnia zapis na termin. Tło pomocnicze oddziela informacje organizacyjne. Ten sam niebieski nie musi występować w każdej linii — wystarczy, że ma powtarzalne zastosowanie.
Potraktuj to jako ćwiczenie kompozycji, nie receptę na wzrost liczby zapisów. O powodzeniu strony decydują również treść oferty, wygoda kontaktu i wiele innych czynników. Nie przypisuj kolorom gwarantowanych efektów sprzedażowych.
Spójność sprawdź także na kolejnych podstronach
Przejdź ze strony głównej do oferty, portfolio i kontaktu. Czy główny przycisk ma wszędzie podobną rolę? Czy podpisy są czytelne? Czy nowa sekcja nie wprowadza przypadkowego odcienia?
Szczególnie uważnie obejrzyj miejsce, w którym łączą się fotografie i elementy interfejsu. Zdjęcie samo może zawierać wiele kolorów. Nie musisz dopasowywać do każdego z nich kolejnego koloru menu czy nagłówka.
Na koniec zapisz paletę wraz z przeznaczeniem odcieni oraz sprawdzonymi parami tekst–tło. Będzie Ci łatwiej dodawać następne podstrony bez każdorazowego rozpoczynania projektowania od zera.
