Ciemny motyw strony WWW - kolory, kontrast i CSS

Ciemne motywy stron internetowych od kilku lat przestały być domeną programistów i aplikacji technicznych. Spotykamy je w sklepach, serwisach informacyjnych, panelach administracyjnych i zwykłych witrynach firmowych. Problem w tym, że zamiana białego tła na czarne i jasnego tekstu na biały rzadko daje dobry rezultat. Interfejs może wyglądać efektownie na projekcie graficznym, a podczas dłuższego czytania męczyć wzrok, utrudniać rozpoznawanie przycisków albo sprawiać, że poszczególne elementy zaczynają się ze sobą zlewać. Jak zaprojektować ciemny motyw strony internetowej, który będzie nie tylko atrakcyjny wizualnie, ale również czytelny i wygodny w codziennym użytkowaniu?

Ciemny motyw strony internetowej - nie wystarczy odwrócić kolorów

Przygotowanie ciemnej wersji interfejsu wydaje się proste. Wystarczy zmienić kolor tła na #000000, tekst na #FFFFFF i odpowiednio dostosować kilka przycisków. Technicznie taka modyfikacja zajmuje niewiele czasu, szczególnie jeśli strona korzysta ze zmiennych CSS. Gorzej z efektem. Duże powierzchnie idealnej czerni zestawione z intensywną bielą tworzą bardzo wyraźny kontrast, który nie zawsze jest przyjemny podczas dłuższego korzystania z witryny. Do tego dochodzą obramowania formularzy, cienie, ikony, powiadomienia i dziesiątki drobnych elementów, które projektowano pierwotnie z myślą o jasnym tle.

W dobrze przygotowanym ciemnym interfejsie poszczególne powierzchnie powinny być od siebie odróżnialne. Panel boczny może mieć nieco inny odcień niż główna część strony, a karta produktu jaśniejsze tło od obszaru znajdującego się pod nią. Nie chodzi o wprowadzenie wielu kolorów, ale o stworzenie odpowiedniej hierarchii wizualnej. Użytkownik powinien od razu rozpoznawać, gdzie kończy się jedna sekcja i zaczyna następna, bez konieczności analizowania każdego elementu.

Warto również pamiętać, że ciemny motyw nie jest automatycznie lepszy dla wzroku. Odczuwany komfort zależy między innymi od jasności ekranu, warunków oświetleniowych, wielkości czcionki i indywidualnych cech widzenia. Niektórzy użytkownicy chętnie korzystają z ciemnego interfejsu wieczorem, ale podczas pracy z długimi tekstami wolą jasne tło. Dlatego w rozbudowanych aplikacjach i serwisach dobrym rozwiązaniem jest możliwość przełączania motywu, zamiast narzucania wszystkim jednej wersji kolorystycznej.

Czerń, grafit czy antracyt - jakie tło wybrać?

Idealna czerń, zapisywana w CSS jako #000000, ma swoje zastosowania, szczególnie w interfejsach przeznaczonych na ekrany OLED. Nie oznacza to jednak, że sprawdzi się jako uniwersalne tło każdej strony. Przy projektowaniu paneli administracyjnych, portali informacyjnych i aplikacji z dużą ilością tekstu często wygodniej pracuje się na ciemnych szarościach. Pozwalają one budować subtelne różnice między elementami bez sięgania po wyraziste obramowania.

Dobrym punktem wyjścia jest grafit, którego odcienie mieszczą się wizualnie pomiędzy klasyczną szarością i czernią. Warto zwrócić uwagę na różnice pomiędzy kolorem grafitowym, antracytowym i ciemnoszarym. Choć w codziennym języku nazwy te bywają stosowane zamiennie, w projekcie interfejsu konkretne wartości barw mogą wywoływać odmienne wrażenia. Grafit z delikatnie niebieskawym podtonem będzie wyglądał inaczej niż neutralna szarość o podobnej jasności.

Dla przykładu można przygotować interfejs z głównym tłem #16181C, kartami #22252B i nieco jaśniejszymi polami formularzy #2C3037. Różnice nie są duże, ale pozwalają wyodrębnić elementy bez tworzenia wrażenia przypadkowego zestawienia kolorowych prostokątów. Jasność samych powierzchni nie musi rosnąć identycznie w całym projekcie. Większe znaczenie ma spójność i łatwość rozpoznawania kolejnych poziomów interfejsu.

Podane wartości są jedynie przykładową paletą, a nie obowiązującym standardem. W rzeczywistym projekcie trzeba dopasować je do kolorów marki, wielkości tekstu i zastosowanych komponentów. Czasami niewielka zmiana jasności tła wystarczy, aby poprawić czytelność całego interfejsu bez ingerowania w jego układ.

Kontrast tekstu i tła - jak sprawdzić czytelność?

Odpowiednio dobrane tło to dopiero połowa pracy. Nawet bardzo estetyczny projekt staje się trudny w obsłudze, gdy tekst ma zbyt mały kontrast. Na ciemnych stronach szczególnie często spotyka się jasnoszare napisy, które dobrze wyglądają na dużym monitorze projektanta, ale stają się słabo widoczne na przeciętnym laptopie. Problem pogłębia się przy małych rozmiarach czcionki, cienkich krojach pisma i ekranach używanych w jasnym otoczeniu.

Do oceny kontrastu służą między innymi wytyczne WCAG 2.2. Dla zwykłego tekstu na poziomie AA wymagany jest współczynnik kontrastu wynoszący co najmniej 4,5:1, a dla odpowiednio dużego tekstu 3:1. W przypadku istotnych elementów nietekstowych, takich jak obramowania potrzebne do rozpoznania pola formularza, również stosuje się wymagania dotyczące kontrastu, zwykle na poziomie 3:1 względem sąsiadujących kolorów.

Nie trzeba obliczać współczynnika ręcznie. Można skorzystać z narzędzi do sprawdzania kontrastu, takich jak WebAIM Contrast Checker, lub funkcji dostępnych w narzędziach deweloperskich przeglądarki. Po wpisaniu dwóch wartości HEX otrzymujemy wynik pozwalający ocenić zgodność z określonym poziomem dostępności. Ważne jest jednak sprawdzanie rzeczywistych par kolorów, a nie tylko głównego tekstu na podstawowym tle. Inny kontrast będzie miała etykieta na karcie, inny napis na przycisku i jeszcze inny tekst w nieaktywnym polu.

Przy długich artykułach czy dokumentacji technicznej lepiej unikać zarówno zbyt ciemnych liter, jak i niepotrzebnie agresywnego kontrastu wizualnego. Kolor #E5E7EB na bardzo ciemnym tle może być wygodnym punktem wyjścia. Ostateczny rezultat zależy jednak także od kroju, grubości i wielkości czcionki, interlinii oraz szerokości kolumny tekstowej. Sama zgodność ze współczynnikiem WCAG nie gwarantuje, że każdy użytkownik będzie czytał stronę z jednakową wygodą.

Kolory przycisków, linków i elementów interaktywnych

Ciemna paleta nie musi oznaczać rezygnacji z koloru. Wręcz przeciwnie - na grafitowym tle nawet niewielki akcent potrafi zwrócić uwagę na ważny przycisk lub informację. Trzeba tylko zdecydować, do czego konkretna barwa ma służyć. Jeśli niebieski oznacza linki, zielony potwierdzenie operacji, a czerwony błąd, użytkownik zaczyna rozpoznawać te zależności. Gdy każdy drugi element ma inny kolor, cały system traci czytelność.

Niebieski jest jednym z częściej wykorzystywanych kolorów interfejsów, ale nie każdy jego odcień dobrze prezentuje się na ciemnym tle. Mocno nasycony granat może być słabo widoczny, natomiast bardzo jasny błękit nie zawsze zapewni odpowiedni kontrast z białym tekstem umieszczonym na przycisku. Przy projektowaniu warto porównać różne odcienie koloru niebieskiego, zwracając uwagę na ich jasność, nasycenie i podton. To przydatne zwłaszcza wtedy, gdy przygotowujemy spójną paletę dla odnośników, przycisków i elementów aktywnych.

Trzeba też rozdzielić kolor tekstu od koloru wypełnienia. Jasnoniebieski odnośnik na ciemnym tle może być czytelny, ale ten sam kolor zastosowany jako wypełnienie przycisku wymaga ponownego dobrania barwy napisu. Nie zawsze będzie nią biel. Przy jaśniejszych odcieniach znacznie lepiej może wypadać ciemny tekst.

Osobną kwestią są stany interaktywne. Przycisk powinien wyglądać inaczej po najechaniu kursorem, podczas aktywacji i po uzyskaniu fokusu z klawiatury. Linków nie warto wyróżniać wyłącznie kolorem, szczególnie w długich akapitach. Podkreślenie lub inna dodatkowa cecha wizualna ułatwia ich rozpoznawanie także osobom, które mają trudności z rozróżnianiem barw.

Jak przygotować ciemny motyw strony w CSS?

Przy większej liczbie podstron ręczne zmienianie kolorów w poszczególnych klasach CSS szybko prowadzi do bałaganu. Znacznie wygodniejsze jest korzystanie ze zmiennych, które przechowują wartości podstawowych kolorów interfejsu. Wtedy zmiana odcienia tła albo barwy tekstu nie wymaga przeszukiwania całego arkusza stylów.

Przykładowa definicja ciemnej palety może wyglądać następująco:

:root {
  color-scheme: dark;

  --background: #16181C;
  --surface: #22252B;
  --surface-alt: #2C3037;
  --text: #E5E7EB;
  --text-muted: #B7BDC7;
  --accent: #8CC8FF;
  --border: #454B55;
}

body {
  background-color: var(--background);
  color: var(--text);
}

.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
}

a {
  color: var(--accent);
}

Zaletą takiej konstrukcji jest możliwość utrzymywania wielu komponentów w jednej palecie. Kolory nie są wpisywane bezpośrednio w każdy selektor, więc łatwiej zachować spójność przy dalszej rozbudowie serwisu. Właściwość color-scheme informuje przeglądarkę, że interfejs obsługuje ciemny schemat kolorystyczny, co może wpłynąć również na wygląd wybranych elementów systemowych, takich jak formularze czy paski przewijania.

Jeśli strona ma automatycznie dostosowywać wygląd do ustawień urządzenia, można wykorzystać zapytanie medialne prefers-color-scheme. Poniższy przykład pokazuje prosty mechanizm, w którym jasna paleta stanowi ustawienie domyślne, a ciemna jest włączana dla użytkowników preferujących taki wygląd:

:root {
  color-scheme: light;

  --background: #FFFFFF;
  --surface: #F3F4F6;
  --text: #20242A;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --background: #16181C;
    --surface: #22252B;
    --text: #E5E7EB;
  }
}

W praktycznym projekcie potrzebne będą oczywiście dodatkowe zmienne dla przycisków, obramowań, komunikatów i pozostałych komponentów. Samo zapytanie prefers-color-scheme nie tworzy też przełącznika motywu na stronie. Jeśli użytkownik ma samodzielnie wybierać wygląd interfejsu niezależnie od ustawień systemowych, trzeba przygotować odpowiedni mechanizm w JavaScript i zapisywać jego preferencję, na przykład w localStorage.

Zdjęcia, ikony i grafiki na ciemnym tle

Przygotowując ciemną wersję serwisu, łatwo skoncentrować się na kolorach CSS i zapomnieć o materiałach graficznych. Tymczasem białe tło zdjęcia produktu będzie wyraźnie odcinało się od grafitowej karty, a ciemne logo zapisane jako plik PNG może niemal całkowicie zniknąć. Problemy tego rodzaju szczególnie często pojawiają się w witrynach, które pierwotnie zaprojektowano wyłącznie w jasnej kolorystyce.

W przypadku ikon wektorowych najwygodniej korzystać z plików SVG, których kolor można kontrolować za pomocą CSS, o ile sposób przygotowania grafiki na to pozwala. Dla logo zwykle lepiej przygotować osobne wersje przeznaczone na jasne i ciemne tło. Nie każdą grafikę da się poprawnie odwrócić filtrem CSS. Dotyczy to szczególnie znaków wielokolorowych, ilustracji i zdjęć zawierających naturalne barwy.

Pewnej ostrożności wymagają również fotografie. Jasne zdjęcie umieszczone pomiędzy dużymi ciemnymi blokami może sprawiać wrażenie zbyt intensywnego, ale automatyczne przyciemnianie wszystkich obrazów nie jest dobrym rozwiązaniem. Pogarsza odwzorowanie kolorów i może powodować utratę szczegółów. Przy zdjęciach produktów lepiej zachować wierną prezentację materiałów, a do ciemnego otoczenia dopasować ramkę, odstępy lub kolor powierzchni, na której znajduje się grafika.

Warto też sprawdzić wygląd wykresów, diagramów i zrzutów ekranowych. Kolorowe linie na wykresie przygotowanym do jasnego motywu mogą po zmianie tła stać się nieczytelne. Czasami wystarczy zmiana siatki i etykiet, innym razem konieczne będzie zastosowanie osobnej palety barw dla wizualizacji danych.

Jak przetestować ciemny interfejs przed publikacją?

Projekt widoczny w edytorze graficznym nie jest jeszcze dowodem, że będzie wygodny na rzeczywistych urządzeniach. Jasność i odwzorowanie kolorów różnią się pomiędzy monitorami, a automatyczna regulacja podświetlenia telefonu może dodatkowo zmieniać sposób odbioru strony. Dlatego ciemny motyw trzeba obejrzeć nie tylko na komputerze, na którym powstawał, ale również na innych ekranach i przy odmiennym oświetleniu.

Szczególnie przydatne jest testowanie formularzy, tabel, rozwijanych menu i komunikatów systemowych. Na statycznej makiecie często wyglądają poprawnie, jednak podczas rzeczywistego korzystania okazuje się, że obramowanie aktywnego pola jest słabo widoczne, komunikat błędu ginie na tle formularza albo lista wyboru ma niewłaściwy kolor tekstu. Należy również sprawdzić stany hover, focus, active i disabled, zamiast ograniczać się do domyślnego wyglądu komponentów.

Dobrym uzupełnieniem testów wizualnych jest automatyczna kontrola dostępności, na przykład za pomocą Lighthouse lub axe DevTools. Takie narzędzia potrafią wskazać część problemów z kontrastem, strukturą dokumentu i elementami interaktywnymi, ale nie zastępują oceny człowieka. Szczególnie jeśli projekt wykorzystuje niestandardowe komponenty, trzeba sprawdzić ich działanie przy użyciu klawiatury oraz czytelność w różnych stanach.

Na koniec dobrze wykonać jeszcze jeden prosty test: przejść przez stronę tak, jak zrobiłby to zwykły użytkownik. Otworzyć artykuł, przeczytać kilka akapitów, kliknąć odnośnik, wypełnić formularz, przełączyć zakładkę i wrócić do poprzedniego widoku. Bez zaglądania do arkusza CSS i bez poprawiania kolorów na bieżąco. Jeśli podczas takiej próby trzeba szukać przycisku albo zastanawiać się, czy element jest aktywny, projekt wymaga dalszej korekty.

Dobrze zaprojektowany ciemny interfejs nie powinien zwracać uwagi samą ciemnością. Grafitowe powierzchnie, właściwie dobrany kontrast, ograniczona paleta kolorów i czytelne elementy sterujące mają przede wszystkim ułatwiać korzystanie ze strony. Efekt wizualny jest ważny, ale dopiero połączenie estetyki z wygodą obsługi sprawia, że ciemny motyw nadaje się do codziennego użytkowania, a nie tylko do pokazania na efektownym zrzucie ekranu.