Najlepsze praktyki dla palet kolorów w trybie ciemnym

Pierwszy ciemny motyw, jaki wdrożyłem, był — z perspektywy czasu — katastrofą. Wziąłem nasz jasny interfejs, przepuściłem każdy kolor przez filtr „inwersji”, ręcznie poprawiłem kilka wartości i uznałem, że to koniec na ten wieczór. W Figmie wyglądał dobrze. Potem zaczęły spływać zgłoszenia: tekst, który „brzęczał”, firmowe przyciski świecące jak radioaktywne cukierki, karty zlewające się w jedną płaską płachtę ciemności. Lekcja została mi w głowie. Dobra paleta kolorów do trybu ciemnego to nie jasna paleta wywrócona na lewą stronę. To osobny problem projektowy z własnymi regułami, a większość z nich działa wbrew twoim instynktom.

Oto, co chciałbym, żeby ktoś mi powiedział przed tą pierwszą próbą.

Tryb ciemny to nie inwersja

Gdy odwracasz jasny motyw, każda relacja, która sprawiała, że działał, zostaje rozregulowana. Biały tekst na granatowym przycisku może być idealny przy kontraście 8:1 w trybie jasnym; po odwróceniu możesz wylądować na bladym przycisku z szarym tekstem, który całkowicie nie spełnia wymogów dostępności. Cienie, które dźwigają sporo głębi w jasnych interfejsach, na ciemnym tle praktycznie znikają — 10-procentowy czarny cień na niemal czarnej powierzchni jest niewidoczny. Nasycone kolory, które na bieli czytają się jako pewne siebie i przyjazne, na czerni stają się agresywne i wibrujące.

Dlatego model myślowy, którym się posługuję, brzmi tak: ciemny motyw to oddzielny zestaw decyzji projektowych, który akurat dzieli ten sam układ i tę samą markę. Od nowa rozwiązujesz kontrast, hierarchię, głębię i kolor akcentu — na ciemnym płótnie. Jeśli twoje narzędzia pozwalają utrzymywać dwa zestawy kolorów (semantyczne tokeny to czysty sposób, by to zrobić — więcej o tym w naszym tekście o tokenach kolorów w systemie projektowym), to jest moment, w którym to się opłaca.

Używaj ciemnej szarości, nie czystej czerni

To najczęstszy ze wszystkich błędów i warto zrozumieć, dlaczego czysta czerń zawodzi, a nie tylko usłyszeć, że należy jej unikać.

Czysta czerń (#000000) w połączeniu z czystą bielą (#FFFFFF) tekstu technicznie daje 21:1 — maksymalny możliwy współczynnik kontrastu. Można by pomyśleć, że celem jest maksymalny kontrast. Nie jest. Ta skrajna różnica luminancji powoduje halację: na ciemnym tle źrenica rozszerza się, by wpuścić więcej światła, a jasny tekst rozlewa się i rozmazuje po krawędziach. U osób z astygmatyzmem — sporej części populacji — efekt zamienia akapity w świecącą, męczącą papkę. Dłuższe sesje czytania stają się naprawdę niewygodne.

Jest też drugi, bardziej praktyczny problem. Jeśli twoja warstwa bazowa to #000000, nie masz już dokąd zejść niżej. Nie zrobisz powierzchni ciemniejszej niż czerń, więc jakiekolwiek poczucie cofniętej głębi znika, a cienie nie mają na co padać.

Rozwiązaniem jest start od bardzo ciemnej szarości. Material Design od Google zaleca #121212 jako bazową ciemną powierzchnię i po latach budowania takich motywów uważam, że to wartość bliska ideału. Jest na tyle ciemna, że czyta się jako „tryb ciemny”, ale zostawia zapas w obie strony. W przypadku tekstu zamiast czystej bieli sięgnij po złamaną biel w zakresie #E0E0E0 do #F2F2F2. Biały tekst na #121212 na tym poziomie wciąż wygodnie spełnia WCAG, jednocześnie zabijając poświatę halacji.

Neutralna paleta startowa, po którą często sięgam:

• Tło bazowe: #121212
• Tekst główny: #E6E6E6 (wysoki nacisk)
• Tekst pomocniczy: #A8A8A8 (średni nacisk, wciąż znacznie powyżej 4.5:1)
• Tekst nieaktywny / podpowiedzi: około #6E6E6E

Jeden subtelny trik: bardzo lekko zabarw swoje ciemne szarości w stronę odcienia marki, zamiast używać czysto neutralnych szarości. Baza #131316 z odrobiną niebieskiego albo #14110F z nutą ciepła sprawia wrażenie zamierzonej i firmowej, a nie domyślnego motywu. Zachowaj subtelność — co najwyżej kilka punktów nasycenia.

Oddawaj głębię jaśniejszymi powierzchniami, nie cieniami

W trybie jasnym karta unosi się nad stroną dzięki swojemu cieniowi. W trybie ciemnym cienie są ledwo widoczne, więc odwracamy logikę: im wyżej leży powierzchnia, tym jest jaśniejsza. Okno modalne jest jaśniejsze od karty, którą zakrywa, a ta jest jaśniejsza od strony za nią.

Material formalizuje to jako nakładkę głębi (elevation overlay) — półprzezroczystą białą warstwę nakładaną na bazową powierzchnię, coraz bardziej kryjącą wraz ze wzrostem wysokości (z grubsza od 0% przy bazie do około 16% na najwyższym poziomie). Nie musisz implementować dosłownej matematyki nakładki; możesz po prostu zapiec wyniki w dyskretne tokeny. Skala, którą wdrażałem i której ufam:

• Poziom 0 (strona): #121212
• Poziom 1 (karty): #1E1E1E
• Poziom 2 (menu, uniesione panele): #242424
• Poziom 3 (okna dialogowe, modale): #2C2C2C
• Poziom 4 (popovery, górne arkusze): #333333

Każdy krok jest jaśniejszy tylko o kilka punktów i ta powściągliwość ma znaczenie — skoki mają być wyczuwalne, a nie obwieszczane. Stosowane konsekwentnie nadaje to interfejsowi realną głębię bez ani jednego cienia i rozwiązuje skargę „wszystko się zlewa”, która dręczyła moją pierwszą próbę. Możesz wciąż położyć na wierzchu delikatny cień dla dodatkowej separacji, ale to przesunięcie jasności wykonuje główną robotę.

Wycisz kolory akcentowe

Weź firmowy kolor wiodący — powiedzmy energiczny saasowy niebieski w rodzaju #2563EB — i rzuć go na tło #121212. Wibruje. Mocno nasycone kolory na ciemnym polu wytwarzają optyczny brzęk i często nie spełniają kontrastu dla tekstu czy ikon, mimo że wyglądają głośno.

Rozwiązanie jest sprzeczne z intuicją: ściągnij nasycenie w dół i jasność w górę. Wytyczne Material zalecają używanie jaśniejszych odcieni (myśl o zakresie 200–50 skali koloru) i wyciszanie ich, aż przekroczą 4.5:1 względem ciemnej powierzchni. W praktyce wyciszam kolory marki o mniej więcej 20–40% na potrzeby trybu ciemnego i rozjaśniam je, a potem sprawdzam wartość.

Konkretnie, ten #2563EB mógłby stać się czymś w rodzaju #7AA2F7 w trybie ciemnym — łagodniejszym, jaśniejszym i znacznie bardziej czytelnym na ciemnej powierzchni. Twój akcent z trybu jasnego i akcent z trybu ciemnego to rodzeństwo, a nie ta sama wartość. To dokładnie ten rodzaj sparowanej eksploracji jasny/ciemny, do której stworzony jest generator palet kolorów: wybierz odcień, a potem dostrajaj nasycenie i jasność, obserwując, jak wartość kontrastu aktualizuje się na żywo.

Kilka uczciwych zastrzeżeń:

• Zachowaj rozpoznawalność kolorów semantycznych. Czerwień błędu, zieleń sukcesu i bursztyn ostrzeżenia po wyciszeniu wciąż muszą czytać się jako czerwień, zieleń i bursztyn. Rozjaśnij i zmiękcz, ale nie odsuwaj odcienia tak daleko, by błąd przestał wyglądać na zagrożenie.
• Duże wypełnienia kolorem to co innego niż tekst. Wielki nasycony baner bohaterski przeżyje więcej nasycenia niż mała etykieta, bo nie prosisz nikogo, by czytał z niego drobny tekst.
• Nie nakładaj nakładek głębi na kolorowe powierzchnie. Przycisk w kolorze podstawowym zachowuje swój kolor na wszystkich poziomach głębi; jaśnieją tylko twoje neutralne powierzchnie, gdy się unoszą.

Utrzymaj kontrast WCAG — w obie strony

Progi dostępności nie zmieniają się w ciemności. WCAG 2.1 wymaga 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (oraz dla istotnych elementów interfejsu i ikon). Zmienia się to, że awarie są bardziej podstępne.

Pułapka, którą widuję najczęściej, to tekst w średnioszarym tonie — coś w rodzaju #888888 na #121212 — który wygląda elegancko i po cichu zawodzi dla tekstu pomocniczego. Zawsze licz rzeczywiste wartości. Oficjalnym odniesieniem są wytyczne kontrastu WCAG od W3C, a dowolny sprawdzacz kontrastu (w tym ten wbudowany w nasz generator palet kolorów) poda ci współczynnik w kilka sekund.

Dwie rzeczy warte poznania, gdy testujesz. Po pierwsze, „więcej kontrastu zawsze lepiej” jest w trybie ciemnym fałszem — czysta biel maksymalizuje wartość, ale wywołuje opisaną halację, więc optymalizujesz pod wygodną czytelność, a nie najwyższy możliwy współczynnik. Po drugie, kolejna generacja standardu, WCAG 3.0, zastępuje prosty współczynnik algorytmem APCA (Advanced Perceptual Contrast Algorithm), który modeluje, jak oko faktycznie postrzega jasny i ciemny tekst, i znacznie lepiej radzi sobie z polaryzacją. Wciąż jest w wersji roboczej, więc dziś wdrażaj według WCAG 2.1, ale jeśli chcesz zabezpieczyć się na przyszłość, przepuść ciemną paletę przez sprawdzacz APCA jako test sensowności — jest wyraźnie bardziej uczciwy wobec ciemnych teł.

Testuj tam, gdzie ludzie naprawdę z tego korzystają

Ciemna paleta może przejść każdy test w Figmie i wciąż polec w realnym świecie. Zmienną, którą na początku najbardziej nie doceniałem, był sam ekran: panele OLED renderują #000000 jako naprawdę wygaszone piksele z brutalnym kontrastem względem podświetlonego tekstu, podczas gdy tańsze LCD rozjaśniają czernie i wypłukują twoje pieczołowicie dostrojone kroki głębi. Paleta, która warstwuje się na twoim monitorze, może wyglądać płasko na budżetowym laptopie kogoś innego.

Moja lista kontrolna testów, wyciągnięta na trudnej drodze:

• Obejrzyj na prawdziwym telefonie OLED przy niskiej jasności, w nocy. To tutaj ujawniają się halacja i przesycenie. Jeśli jest tu wygodnie, jest wygodnie wszędzie.
• Sprawdź kroki głębi na tanim LCD. Jeśli twoje karty znikają w tle, kroki są zbyt subtelne.
• Przełączaj na żywo między jasnym a ciemnym. Rażące błyski jasności zwykle oznaczają, że twoja ciemna baza jest zbyt jasna albo jasna baza zbyt szara.
• Spójrz na to z obrazami i treściami użytkowników. Prawdziwe zdjęcia, awatary i osadzone media siadają na twoich powierzchniach i mogą gryźć się w sposób, którego czysty mockup nigdy nie pokaże.
• Potwierdź, że stany fokusu i obramowania przetrwały. Subtelne obramowania 1px, które definiowały pola w trybie jasnym, w ciemności często znikają i potrzebują jaśniejszej wartości.

Wersja w skrócie

Gdybym musiał sprowadzić wszystko do garstki ruchów: zaczynaj od #121212, nigdy od #000000. Używaj złamanej bieli zamiast czystej bieli tekstu. Pokazuj głębię, rozjaśniając uniesione powierzchnie, skoro cienie tu prawie nie istnieją. Wyciszaj i rozjaśniaj akcenty, aż przestaną brzęczeć, a zaczną spełniać kontrast. Trzymaj się 4.5:1 dla tekstu treści, ale oprzyj się pokusie gonienia maksimum. I testuj na prawdziwym ekranie OLED w ciemnym pomieszczeniu, bo to jedno środowisko, którego twoje mockupy nigdy nie zasymulują.

Dobrze zrobiony ciemny motyw to nie tylko uprzejma opcja dla nocnych marków — to spokojniejsza, bardziej skupiona wersja twojego produktu. Wymaga tylko potraktowania go jako odrębnego problemu projektowego, którym faktycznie jest.