Karanlık tema sadece rengi tersine çevirmek değildir

Kısa cevap

Karanlık tema, açık temanın renklerini tersine çevirerek elde edilmez; zemin, yüzeyler, metin ve vurgu renkleri koyu bir ortamda ayrı ayrı yeniden kurulur. Saf siyah zemin genellikle tercih edilmez, çünkü gölgeler siyahın üzerinde görünmez, yüzeyler arasındaki derinlik kaybolur ve yazıyla zemin arasındaki fark gereğinden sert olur; koyu bir gri, yüzeylerin yükseldikçe biraz açılmasına yer bırakır. Açık temada iyi çalışan doygun renkler koyu zeminde ya okunmaz kalır ya da titreşiyor gibi görünür; bu yüzden karanlık temada aynı rolün daha açık ve daha az doygun bir tonu seçilir.

Tersine çevirmek neden yetmez

Bir arayüzü karanlığa taşımanın en kısa yolu, her rengi tersine çevirmektir: beyaz siyah olur, siyah beyaz, açık mavi koyu turuncuya döner. Bu yol birkaç saniyede bir sonuç verir ve neredeyse her yerde yanlış sonuç verir.

Tersine çevirme bir renk işlemidir, bir tasarım kararı değildir. Marka mavisi, tamamlayıcısı olan bir turuncuya dönüşür; artık marka mavisi değildir. Fotoğraflar negatife döner ve insan yüzleri tanınmaz hâle gelir. Gölgeler açık bir hale olur ve bir kartın zeminden yükseldiği değil, zemine gömüldüğü izlenimi doğar. Başarı yeşili pembeye, hata kırmızısı camgöbeğine döner ve UX-02'de kurulan bütün durum eşlemeleri bozulur.

UX-01'deki token yapısı burada karşılığını verir. Bileşenler «yüzey», «yüzey üstündeki metin», «birincil» ya da «hata» gibi rol adlarını çağırır; karanlık tema, bu adların ham paletteki başka basamaklara bağlanmasıdır. Tasarımcının işi her rol için koyu ortamda doğru değeri seçmektir, bir düğmeyle bütün renkleri çevirmek değil.

Saf siyah yerine koyu gri

Kartın sorusu bu tasarım kararlarının ilkine bakıyor: karanlık temada neden saf siyah zemin tercih edilmez?

Cevap önce gölgededir. Açık temada bir kartın zeminden ayrıldığını, altına düşen yumuşak bir gölge söyler. Gölge, zeminden daha koyu bir alandır. Zemin zaten saf siyahsa, ondan daha koyu bir gölge çizilemez; kart, menü ve diyalog kutuları aynı düzlemde yüzüyormuş gibi görünür.

Material Design'ın Android bileşen kütüphanesi bu kararı açıkça yazar: temel karanlık temanın zemin ve yüzey renkleri siyah değil koyu gridir ve kütüphane bunun gölgelerin görünürlüğünü artırdığını söyler. Kütüphanenin varsayılan karanlık zemin ve yüzey rengi #121212'dir; Google'ın karanlık tema tasarım alıştırması da arayüzün en alt katmanı için aynı değeri verir.

Kontrastın sertliği de hesaba girer. Beyaz metnin saf siyah üzerindeki WCAG kontrast oranı 21:1'dir, yani ölçeğin tavanı. #121212 üzerinde aynı beyaz yaklaşık 18,7:1 verir; bu hâlâ WCAG'ın en sıkı metin eşiğinin çok üstündedir. Koyu gri zemin okunurluktan hiçbir şey kaybettirmez, yalnız ölçeğin en uç noktasından biraz geri çekilir. Pek çok ekip, gövde metnini de saf beyaz yerine çok açık bir griyle yazar: #E0E0E0, #121212 üzerinde yaklaşık 14,2:1 verir.

Material belgeleri bu seçimi ayrıca açık metinde göz yorgunluğunu azaltmakla da gerekçelendirir. Bu bir sağlık iddiasıdır ve karanlık temanın gözle ilişkisi hakkındaki kanıt RM-05'in konusudur; bu derste koyu gri zemini gerekçelendirmek için gölge ve derinlik yeterlidir.

Yükseldikçe açılan yüzeyler

Gölge karanlık temada zayıfladığına göre, yüzeylerin birbirinden ayrılması için başka bir işaret gerekir. Material'ın yanıtı, yüzeyleri yükseldikçe biraz açmaktır.

Material Components belgeleri bunu şöyle anlatır: karanlık temada gölgeler koyu zeminle daha az kontrast oluşturduğu için daha az etkilidir; bunu telafi etmek için yüzeyler, varsayılan ışık kaynağına yaklaştıkça, yani yükseldikçe daha açık ve daha renkli olur. Kütüphane bunu önceleri yüzeyin üstüne konan yarı saydam bir katmanla yapıyordu; katmanın saydamlığı yükseltiyle artıyordu. Belgelerin güncel notu, bu yöntemin yerini bir tonal yüzey renk sistemine bıraktığını söyler.

Sayılarla bir örnek: #121212 zemine yüzde beş beyaz karıştırılınca #1E1E1E, yüzde on bir karıştırılınca #2C2C2C elde edilir. Zemin, bir kart ve bir diyalog kutusu bu üç değeri alırsa, göz üç katmanı gölgeye ihtiyaç duymadan ayırır. Token yapısında bu, «yüzey», «yüzey yükseltisi bir» ve «yüzey yükseltisi iki» gibi rol adlarına dönüşür; açık temada bu adlar aynı beyaza ya da çok yakın açık grilere bağlanabilir ve yükselti orada gölgeyle gösterilir.

Aynı yaklaşım bu dersin öbür kararlarına bir kısıt getirir: yüzeyler yükseldikçe açıldığı için, en yüksek yüzeyin üstündeki metin ve simgelerin kontrastı zeminin üstündekinden biraz daha düşük olur. Beyaz metin #2C2C2C üzerinde yaklaşık 14:1 verir; sorun yoktur. Ama sınırda duran renkler, yükseltinin en üstünde eşiğin altına düşebilir. Bu yüzden karanlık temadaki her renk, yalnız zeminde değil, en açık yüzeyde de sınanır.

Doygunluğu azaltmak

Açık temada iyi çalışan renklerin çoğu, karanlık temada olduğu gibi kullanılamaz; engel hem ölçülebilir hem algısaldır.

Ölçülebilir olan kontrasttır. Açık temada beyaz zemin üzerinde okunan koyu ve doygun bir mavi, koyu zemin üzerinde okunmaz hâle gelir: #1565C0 mavisi #121212 üzerinde yalnız yaklaşık 3,3:1 verir ve gövde metni için WCAG'ın 4,5:1 eşiğinin altında kalır. Aynı mavinin açık bir tonu, #90CAF9, aynı zeminde yaklaşık 10,7:1 verir.

Algısal olan görsel titreşimdir. Google'ın Material karanlık tema alıştırması, karanlık temada daha açık varyantların seçildiğini, böylece renk sisteminin anlatım gücünü koruyup uygun kontrastı sürdürdüğünü yazar ve daha doygun renklerin koyu zeminlerde görsel olarak «titreşme» eğiliminde olduğunu, bunun okumayı zorlaştırdığını ekler.

UX-02'de kurulan durum renkleri de bu dönüşümden geçer. #D32F2F hata kırmızısı #121212 üzerinde yaklaşık 3,8:1, #2E7D32 başarı yeşili yaklaşık 3,7:1 verir; ikisi de metin eşiğinin altındadır. Açık tonları, #EF9A9A ve #A5D6A7, aynı zeminde yaklaşık 8,7:1 ve 11,4:1 verir. Karanlık temada «hata» token'ı bu açık kırmızıya bağlanır; rol aynı kalır, değer değişir. Ton ailesinin korunması önemlidir: kullanıcı açık kırmızıyı hâlâ kırmızı olarak okur, UX-02'deki simge ve metin de zaten rengin yanında durur.

Marka renkleri için bu bir karar noktasıdır. Marka mavisini karanlık temada açmak, onu markanın rehberindeki değerden uzaklaştırır. Burada GT-10'un kayıt düzeni yardım eder: karanlık tema için seçilen açık mavi, markanın ekran için türetilmiş bir karşılığı olarak rehbere yazılabilir. Hangi tonun seçileceği ekibin kararıdır; ölçülebilir olan kısım, seçilen tonun zeminde ve en yüksek yüzeyde gereken kontrastı vermesidir.

OLED ekranlarda enerji

Karanlık temanın sık anılan bir gerekçesi pil tasarrufudur. Bu gerekçe ekran teknolojisine ve parlaklığa bağlıdır.

Arkadan aydınlatmalı LCD ekranlarda ışık, görüntü koyu da olsa açık da olsa arkada yanar; karanlık temanın enerji etkisi bu ekranlarda sınırlıdır. OLED ekranlarda ise koyu pikseller daha az güç çeker. Purdue Üniversitesi'nden Pranab Dash ve Y. Charlie Hu'nun 2021'de MobiSys konferansında sunduğu çalışma, bu tasarrufun ne kadar olduğunu ölçtü. Üniversitenin duyurusuna göre yüzde yüz parlaklıkta açık temadan karanlık temaya geçmek ortalama yüzde 39 ile 47 arasında tasarruf sağlarken, iç mekânda otomatik parlaklığın çoğu zaman kaldığı düzeyi kapsayan yüzde 30 ile 50 aralığında tasarruf yalnız yüzde 3 ile 9 arasında kaldı.

Bu sonuç koyu gri kararıyla da ilişkilidir. Saf siyah bir piksel OLED'de ışık üretmez; #121212 üretir, ama çok az. Enerji kazancının büyük bölümü, zeminin açık bir yüzeyden koyu bir yüzeye dönmesinden gelir; saf siyah ile çok koyu gri arasındaki fark, bu büyük farkın yanında küçüktür. Enerji gerekçesi, tek başına saf siyahı zorunlu kılmaz.

Örnek — koyu kartlarda profil fotoğrafları

Bir topluluk uygulaması, karanlık temada üyelerin profil fotoğraflarını yuvarlak çerçevelerde, yükseltilmiş kartların içinde gösteriyor. Fotoğrafların çoğu karanlık bir arka planla, akşam ya da loş bir iç mekânda çekilmiş.

Ekip, kontrast hesabını yalnız metin için değil, fotoğrafların kenarı için de yapıyor. Koyu bir ten örneği olan #4A2C1D, saf siyah üzerinde yaklaşık 1,7:1, #121212 üzerinde 1,5:1, en yüksek kart yüzeyi olan #2C2C2C üzerinde ise yalnız 1,1:1 veriyor. Buna karşılık #F1C7A9 gibi açık bir ten aynı yüzeylerde 9:1'in üstünde kalıyor. Yani koyu tenli bir üyenin, koyu bir arka planla çekilmiş fotoğrafı, yükseltilmiş bir kartın içinde kenarından kaybolmaya başlıyor: yuvarlak çerçeve yüzeyle birleşiyor, yüzün sınırı ancak içerideki ayrıntıdan okunuyor. Yükseltiyle açılan yüzeyler bu durumu hafifletmiyor, tersine koyu tenin kendisine yaklaştığı için ağırlaştırıyor.

Çözüm bir token'dır: «avatar kenarı» adlı semantik bir rol, karanlık temada çok ince, yarı saydam açık bir çizgiye, açık temada ise yarı saydam koyu bir çizgiye bağlanıyor. Kenar, fotoğrafın içine dokunmuyor; yalnız çerçevenin sınırını, fotoğraftaki tenden bağımsız olarak görünür kılıyor. Ekip sonucu, en açık ten örneğinden en koyusuna kadar üyelerin, gündüz ve gece çekilmiş fotoğraflarıyla, üç yüzey düzeyinin her birinde yeniden inceliyor. Aynı fotoğrafın açık temada da bir sorunu olup olmadığı ayrıca bakılır: orada sınırda kalan, açık tenli ve beyaz arka planlı fotoğraflardır.

Sık yapılan yanlış

Özet

1. Karanlık tema, açık temanın tersine çevrilmiş hâli değildir; UX-01'deki semantik token'lar koyu ortam için ham paletin başka basamaklarına bağlanır ve bileşenler değişmez.
2. Saf siyah yerine koyu gri, örneğin #121212, gölgelere ve yükseltiye yer bırakır; yüzeyler yükseldikçe açılır ve doygun renkler koyu zeminde okunurluk ve titreşim nedeniyle daha açık, daha az doygun tonlarıyla değiştirilir.
3. OLED'de enerji kazancı parlaklığa bağlıdır, yüksek parlaklıkta büyük, iç mekân parlaklığında küçüktür; her renk yalnız zeminde değil en yüksek yüzeyde de sınanır ve koyu tenli fotoğraflar koyu yüzeylerde ayrı bir kenar token'ıyla korunur.

Kendini sına

1. (Kolay) Material Components for Android'in varsayılan karanlık zemin ve yüzey rengi nedir?
2. (Kolay) OLED ekranı arkadan aydınlatmalı LCD ekrandan ayıran temel özellik nedir?
3. (Orta) Karanlık temada neden saf siyah zemin tercih edilmez?
4. (Orta) Açık temada kullanılan #1565C0 mavisi karanlık temada neden olduğu gibi metin rengi olarak kullanılamaz?
5. (Zor) Purdue çalışmasının sonuçlarına göre karanlık temanın enerji gerekçesi hangi koşulda güçlü, hangi koşulda zayıftır ve bu, saf siyah ile koyu gri arasındaki seçim için ne anlama gelir?
6. (Zor) Karanlık temada yükseltilmiş kartlardaki profil fotoğraflarında koyu tenli üyeler için neden ayrı bir kenar token'ı gerekir?

Cevaplar

1. #121212 («Saf siyah yerine koyu gri»).
2. Her piksel kendi ışığını üretir ve arkadan aydınlatma yoktur; koyu pikseller daha az güç çeker («OLED ekranlarda enerji»).
3. Gölge zeminden daha koyu bir alandır ve saf siyahın üzerinde çizilemez; kart, menü ve diyalog aynı düzlemde görünür ve yüzeyler arası derinlik kaybolur. Beyaz metin saf siyahta ölçeğin tavanı olan 21:1'e ulaşır; koyu gri, #121212 üzerinde yaklaşık 18,7:1 ile okunurluğu korurken yüzeylerin yükseldikçe açılmasına yer bırakır («Saf siyah yerine koyu gri»).
4. #121212 üzerinde yaklaşık 3,3:1 verir ve gövde metni için 4,5:1 eşiğinin altında kalır; doygun renkler ayrıca koyu zeminde titreşiyor gibi görünür. Aynı mavinin açık tonu, #90CAF9, yaklaşık 10,7:1 verir («Doygunluğu azaltmak»).
5. Yüzde yüz parlaklıkta ortalama yüzde 39–47 tasarrufla güçlü, iç mekândaki yüzde 30–50 parlaklıkta yüzde 3–9 ile zayıftır. Kazancın büyük bölümü zeminin açıktan koyuya dönmesinden gelir; saf siyah ile çok koyu gri arasındaki fark bunun yanında küçüktür, bu yüzden enerji gerekçesi tek başına saf siyahı zorunlu kılmaz («OLED ekranlarda enerji»).
6. #4A2C1D gibi koyu bir ten, #2C2C2C yüzeyinde yaklaşık 1,1:1 verir ve fotoğrafın kenarı yüzeyle birleşir; yükseltiyle açılan yüzey koyu tene yaklaştığı için sorunu ağırlaştırır. İnce, yarı saydam bir kenar, sınırı fotoğraftaki tenden bağımsız görünür kılar («Örnek — koyu kartlarda profil fotoğrafları»).

Kaynaklar

• Material Components for Android, «Dark theme» belgesi ve renk kaynakları (design_dark_default_color_background).
• Google Codelabs, «Design a dark theme with Material and Figma».
• Dash, P. ve Hu, Y. C., «How much battery does dark mode save?», MobiSys 2021, s. 323–335.
• Purdue University Elmore Family School of Electrical and Computer Engineering, «Dark mode may not save your phone's battery life as much as you think, but there are a few silver linings», 28 Temmuz 2021.
• W3C, «Web Content Accessibility Guidelines (WCAG) 2.2».

Sonraki adım

UX-04 tek bir bileşenin içine giriyor: bir butonun üzerine gelme, basılma, klavye odağı ve kullanılamaz hâllerini birbirinden ayıran renk katmanlarını, odak çizgisinin hem açık hem koyu yüzeylerde nasıl görünür tutulacağını ve soluklaştırılan bir öğenin nereye kadar okunabilir kaldığını tartışıyor. UX-05 ise temanın kaynağını kullanıcıya bırakıyor: bir duvar kâğıdı fotoğrafından bütün arayüzün ton paletinin nasıl üretildiğini ve bunun marka tanınırlığına bedelini soruyor.