Paleta kolorów w projekcie strony to zdefiniowany zestaw barw: główny kolor marki, kolory dodatkowe, tła, tekstu i stanów (sukces, błąd, ostrzeżenie). Dobra paleta buduje rozpoznawalność, prowadzi wzrok użytkownika i zapewnia czytelność interfejsu.
Z czego składa się paleta?
- kolor główny (marka, przyciski, linki),
- kolor akcentowy do wyróżnień,
- neutralne szarości na tła, ramki i tekst,
- kolory semantyczne: zielony (sukces), czerwony (błąd), żółty (ostrzeżenie), niebieski (informacja).
Jak dobrać proporcje?
Często stosuje się zasadę 60-30-10: około 60% powierzchni zajmuje kolor dominujący (zwykle neutralny), 30% kolor dodatkowy, a 10% akcent. Nadmiar kolorów rozprasza i utrudnia wskazanie najważniejszych elementów, takich jak przycisk wezwania do działania.
Kontrast i dostępność
Wytyczne WCAG wymagają kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu oraz elementów interfejsu. Nie opieraj znaczenia wyłącznie na kolorze: różne rodzaje daltonizmu dotyczą około 1 na 12 mężczyzn, więc błędy w formularzu oznaczaj także ikoną lub tekstem.
Jak sprawdzić paletę?
Użyj kalkulatora kontrastu (np. wbudowanego w narzędzia deweloperskie przeglądarki), przetestuj stronę w trybie ciemnym i w symulacji daltonizmu. Kolory zapisz jako zmienne CSS, aby łatwo je zmieniać w całym projekcie.
Proporcja 60-30-10 to popularna wskazówka: kolor dominujący, drugoplanowy i akcentowy.