Wieczorem otwierasz stronę, a jasne tło od razu przyciąga uwagę. Przełączasz ją na ciemną i czytasz dalej. To wygodny scenariusz, dopóki po zmianie nadal widać podpisy zdjęć, pola formularza i aktywny element menu.
Tryb ciemny na stronie internetowej warto traktować jako drugi wariant projektu. Potrzebuje własnych kolorów i testów. Samo przyciemnienie tła nie wystarczy, szczególnie gdy strona zawiera sklep, formularze i treści dodawane przez różne osoby.
Zacznij od pytania, do czego służy Twoja strona
Przy dłuższych artykułach możliwość wyboru wyglądu może być przydatnym udogodnieniem. W krótkiej witrynie usługowej ważniejszy na początku bywa jasny opis oferty, czytelny kontakt i sprawne menu. Kolejność prac warto ustalać według potrzeb odwiedzających.
Nie każdy polubi ciemny wariant. Zamiast zgadywać, pozwól wybrać. Nie opieraj decyzji wyłącznie na tym, że ciemny ekran dobrze wygląda na makiecie. Popatrz na rzeczywiste zdjęcia, treści i elementy, z których korzysta klient.
Jeśli masz ograniczony budżet, najpierw dopracuj podstawowy wariant. Drugi motyw oznacza kolejną wersję do sprawdzania również po późniejszym dodaniu nowego formularza czy sekcji.
Ustawienie systemu to dobry początek, ręczny wybór jest ważniejszy
Przeglądarka może odczytać preferencję jasnego lub ciemnego wyglądu przez prefers-color-scheme. Dzięki temu pierwsza wizyta może od razu pokazać wariant zgodny z ustawieniem urządzenia.
Na tym warto zbudować prostą zasadę: dopóki użytkownik nie wybierze sam, strona korzysta z preferencji systemowej. Po ręcznym przełączeniu powinna respektować jego decyzję. Jeśli przewidujesz zapisywanie ustawienia, obsłuż też sytuację, w której przeglądarka blokuje pamięć lokalną.
Przycisk musi wyjaśniać działanie. Sam księżyc nie zawsze wystarczy. Nazwa dostępna dla czytnika ekranu i poprawny stan kontrolki pomagają zrozumieć, co wydarzy się po aktywacji. Zadbaj również o klawiaturę i widoczny fokus.
Kontrast sprawdza się w obu wariantach
Jasnoszary tekst na granatowym tle może wyglądać elegancko, ale na małym ekranie stać się mało czytelny. Dotyczy to zwłaszcza dat, etykiet i podpisów. To właśnie drobne elementy łatwo pominąć, gdy ocenia się tylko duży nagłówek.
WCAG 2.2 opisuje minimalny kontrast tekstu: co do zasady 4,5:1 dla zwykłego tekstu i 3:1 dla tekstu spełniającego definicję dużego. Ten drugi próg nie dotyczy automatycznie każdego nagłówka. Liczą się jego rozmiar i grubość; dokument wskazuje 18 punktów lub 14 punktów przy pogrubieniu.
Sam kontrast tekstu nie wyczerpuje dostępności. Oddzielnie sprawdź obramowania pól, stan błędu i fokus. Jeżeli informację przekazuje kolor, dodaj też zrozumiałą treść lub inny czytelny sygnał. Nie każ użytkownikowi domyślać się znaczenia czerwonej ramki.
Nie odwracaj kolorów całej strony
Globalny filtr może zmienić zdjęcia, znaki firmowe i kolory produktów. W portfolio lub sklepie taka różnica jest szczególnie niepożądana. Materiał ma pokazywać projekt albo produkt zgodnie z przeznaczeniem.
Lepiej przygotować zestawy kolorów dla tła, powierzchni kart, tekstu, ramek i przycisków. Ten sam komponent korzysta wtedy z odpowiednich wartości. Zdjęcia pozostają zdjęciami, a projektant kontroluje sposób ich osadzenia.
Osobnej uwagi potrzebują logotypy z przezroczystym tłem i grafiki zawierające tekst. Czasem właściwym rozwiązaniem będzie neutralna powierzchnia pod materiałem. Nie zakładaj, że jedna wersja pliku sprawdzi się na każdym tle.
W WordPressie sprawdź także zawartość wtyczek
Menu i akapit mogą działać poprawnie, podczas gdy formularz z innego modułu zachowa własne kolory. W sklepie dochodzą koszyk, komunikaty, pola płatności i konto klienta. Każdy z tych widoków powinien znaleźć się na liście odbioru.
Przygotuj kilka prostych zadań: przeczytaj wpis, rozwiń menu, wpisz dane w formularzu i wywołaj błąd walidacji. Zrób to w obu motywach na telefonie oraz klawiaturą na komputerze. Zwróć uwagę na czytelność komunikatów, nie tylko na wygląd pustego pola.
Sprawdź też wejście bez zapisanego wyboru, ponowną wizytę i odświeżenie podstrony. Jasny błysk przed pojawieniem się ciemnego motywu jest sygnałem, że trzeba poprawić moment zastosowania ustawienia. Dekoracyjne przejścia powinny respektować ograniczenie ruchu w systemie.
Jak zlecić wdrożenie trybu ciemnego?
W briefie opisz wariant domyślny, zachowanie przełącznika, listę widoków i zasady dla zdjęć oraz znaków marki. Zapytaj o testy formularza, klawiatury i kontrastu. Dzięki temu wycena dotyczy konkretnego zakresu.
Takie decyzje są częścią projektowania UX/UI strony. Jeśli planujesz nową witrynę lub rozbudowę obecnej, zobacz ofertę stron WordPress dla firm i prześlij adres strony. Możemy zacząć od tego, które widoki rzeczywiście wymagają drugiego wariantu.