Karanlık Mod (Dark Mode) Tasarlarken Yapılan 5 Kritik Ergonomi Hatası

Karanlık mod tasarımı, yalnızca arka planı siyaha boyamaktan ibaret değildir. Saf siyah (#000000) yerine koyu gri ve obsidyen tonları tercih etmek, metin kontrastını doğru ayarlamak ve erişilebilirlik (WCAG) standartlarına uymak, kullanıcı deneyimini doğrudan etkiler. Bu yazıda, tufiworks olarak projelerde en sık karşılaştığımız beş dark mode tasarım hatasını, her birinin ergonomik etkisini ve uygulanabilir çözümlerini HEX kodları ile kontrast oranları üzerinden ele alıyoruz.

Karanlık Mod Neden Ergonomik Bir Tasarım Problemidir?

Açık temada iyi çalışan bir arayüz, renkleri ters çevrildiğinde aynı okunabilirliği sunmaz. Göz, koyu zemin üzerindeki açık metni farklı algılar: Parlak metin koyu zeminde “yayılıyormuş” gibi görünebilir, gölgeler kaybolur, doygun renkler titreşir. Bu nedenle dark mode UI ergonomi konusu, renk seçiminden tipografiye, derinlik hissinden erişilebilirliğe kadar ayrı bir planlama gerektirir.

Hata 1: Arka Planda Saf Siyah Kullanmak – Saf Siyah Yerine Koyu Gri Tercih Edin

En yaygın hata, arka plan rengi olarak doğrudan #000000 kullanmaktır. Saf siyah zemin üzerindeki beyaz metin maksimum kontrast (21:1) oluşturur; bu da bazı kullanıcılarda metnin kenarlarında bulanıklık ve parlama hissine, uzun okumalarda göz yorgunluğuna yol açabilir. Ayrıca saf siyah, yüzeyler arasında katman (elevation) farkı yaratmayı zorlaştırır ve arayüz düz, derinliksiz görünür. OLED ekranlarda kaydırma sırasında piksellerin tamamen kapalıdan açığa geçişi, kısa süreli iz (smearing) etkisi de oluşturabilir.

Çözüm: Saf siyah yerine koyu gri ya da hafif renk tonu taşıyan obsidyen tonları kullanın. Google'ın Material Design rehberinde önerilen #121212 bu açıdan iyi bir başlangıç noktasıdır. Marka kimliğinize göre bu tona çok hafif bir mavi ya da mor alt ton eklemek, arayüze daha sıcak ve özgün bir karakter kazandırır.

• Yanlış: #000000 zemin + #FFFFFF metin (21:1 – aşırı sert kontrast)
• Doğru: #121212 zemin + #E0E0E0 metin (yaklaşık 14.2:1 – güçlü ama yumuşak kontrast)

Hata 2: Saf Beyaz Metinle Aşırı Kontrast Oluşturmak

Kontrastın yüksek olması iyi okunabilirlik anlamına gelse de koyu zeminde saf beyaz (#FFFFFF) metin, özellikle uzun paragraflarda göz yorgunluğunu artırabilir. Astigmatı olan kullanıcılarda açık metnin koyu zeminde dağılması (halation) daha belirgin hissedilir.

Çözüm: Ana gövde metni için saf beyaz yerine kırık beyaz tonlar tercih edin. #E0E0E0 gibi bir ton, #121212 zemin üzerinde yaklaşık 14.2:1 oranı sağlar ve WCAG'nin en sıkı seviyesi olan AAA (7:1) eşiğinin rahatça üzerinde kalır. Bunun yanında:

• Çok ince (thin/light) font ağırlıklarından kaçının; koyu zeminde ince harfler daha kolay kaybolur.
• Satır aralığını açık temaya göre bir miktar artırmayı değerlendirin.
• Saf beyazı yalnızca başlıklar veya kısa vurgular gibi sınırlı alanlarda kullanın.

Hata 3: İkincil Metinlerde Yetersiz Dark Mode Kontrast Oranı

Aşırı kontrastın tam tersi de sık görülen bir problemdir: Açıklama metinleri, form etiketleri, tarih bilgileri ve placeholder'lar için seçilen koyu gri tonlar, zeminle neredeyse kaybolur. Doğru bir dark mode kontrast oranı belirlemek, hem estetik hem de erişilebilirlik açısından kritiktir.

WCAG 2.x kriterlerine göre AA seviyesinde:

• Normal boyuttaki metin için en az 4.5:1 kontrast oranı gerekir.
• Büyük metin (yaklaşık 18pt ve üzeri ya da 14pt kalın) için en az 3:1 yeterlidir.
• İkon, buton kenarlığı ve form alanı sınırı gibi arayüz bileşenleri için en az 3:1 önerilir.
• AAA seviyesinde normal metin için hedef 7:1'dir.

Örnek: #121212 zemin üzerinde #666666 ikincil metin yaklaşık 3.3:1 oranında kalır ve normal boyutlu metin için AA kriterini karşılamaz. Aynı zeminde #A0A0A0 kullanıldığında oran yaklaşık 7.2:1'e çıkar; bu da metni hiyerarşide ikincil tutarken okunabilirliği korur.

Karanlık Mod Renk Paleti ve WCAG Kontrast Karşılaştırması

Aşağıdaki karşılaştırma, #121212 arka plan üzerinde sık kullanılan renk kombinasyonlarının yaklaşık kontrast oranlarını ve WCAG erişilebilirlik dark mode değerlendirmesini özetler. Değerler WCAG göreli parlaklık formülüyle hesaplanmış yaklaşık oranlardır; kendi paletinizi bir kontrast denetleme aracıyla doğrulamanızı öneririz.

• #FFFFFF metin / #000000 zemin: 21:1 – AAA geçer, ancak uzun metinde sert ve yorucu olabilir.
• #FFFFFF metin / #121212 zemin: yaklaşık 18.7:1 – AAA geçer; başlıklar için uygundur.
• #E0E0E0 metin / #121212 zemin: yaklaşık 14.2:1 – AAA geçer; gövde metni için önerilir.
• #A0A0A0 metin / #121212 zemin: yaklaşık 7.2:1 – AAA geçer; ikincil metin için uygundur.
• #666666 metin / #121212 zemin: yaklaşık 3.3:1 – normal metinde AA'yı karşılamaz; yalnızca devre dışı (disabled) öğeler gibi sınırlı durumlarda düşünülebilir.
• #90CAF9 vurgu / #121212 zemin: yaklaşık 10.7:1 – AAA geçer; bağlantı ve vurgu rengi için uygundur.
• #0000FF vurgu / #121212 zemin: yaklaşık 2.2:1 – AA'yı karşılamaz; koyu zeminde kullanılmamalıdır.
• #CF6679 hata rengi / #121212 zemin: yaklaşık 5.2:1 – AA geçer; hata mesajları için kullanılabilir.

Hata 4: Açık Temanın Doygun Renklerini Karanlık Moda Aynen Taşımak

Açık temada canlı ve dengeli görünen marka renkleri, koyu zeminde titreşir, göze batar ya da tam tersine zeminde kaybolur. Örneğin saf mavi (#0000FF), #121212 üzerinde yalnızca yaklaşık 2.2:1 kontrast sağlar ve bağlantı rengi olarak okunması zorlaşır.

Çözüm: Karanlık mod renk paleti oluştururken marka renklerinin daha açık ve daha az doygun (desatüre) varyantlarını kullanın. Material Design'ın 200–50 aralığındaki tonlara benzer pastelleşmiş renkler, koyu zeminde hem okunur hem de göz yormaz. Pratik adımlar:

1. Her marka rengi için ayrı bir koyu tema varyantı tanımlayın; renkleri otomatik ters çevirmeye güvenmeyin.
2. Vurgu renklerini geniş alanlarda değil, buton, bağlantı ve ikon gibi odak noktalarında kullanın.
3. Uyarı, hata ve başarı renklerini de koyu zemin için ayrıca test edin.
4. Tasarım token'ları (design tokens) ile açık ve koyu tema renklerini merkezi olarak yönetin.

Hata 5: Derinliği Gölgelerle Anlatmaya Çalışmak

Açık temada kartlar, modallar ve açılır menüler genellikle gölgelerle zeminden ayrılır. Koyu zeminde ise gölgeler neredeyse görünmez hale gelir; sonuçta tüm katmanlar birbirine karışır ve kullanıcı hangi öğenin önde olduğunu kavramakta zorlanır.

Çözüm: Karanlık modda derinliği gölge yerine yüzey parlaklığıyla anlatın. Kullanıcıya yaklaşan (daha yüksek katmandaki) yüzeyler bir miktar daha açık tonla gösterilir:

• Temel zemin: #121212
• Kartlar ve paneller: #1E1E1E
• Modal ve açılır menüler: #232323 – #2C2C2C aralığı

Bu katmanlı yaklaşım, saf siyah zeminde mümkün olmayan bir hiyerarşi sağlar ve karanlık mod tasarımı boyunca tutarlı bir görsel dil oluşturur. Gerekli yerlerde ince ve düşük opaklıkta kenarlıklar da ayrımı güçlendirebilir; ancak bu kenarlıkların arayüz bileşeni olarak 3:1 kontrast kriterini karşılamasına dikkat edin.

Dark Mode UI Ergonomi İçin Kontrol Listesi

Yayına almadan önce karanlık mod arayüzünüzü şu sorularla kontrol edebilirsiniz:

• Arka plan saf siyah yerine koyu gri veya obsidyen bir ton mu?
• Gövde metni en az 4.5:1, tercihen 7:1 ve üzeri kontrast sağlıyor mu?
• İkincil metinler ve placeholder'lar AA eşiğini karşılıyor mu?
• Marka ve vurgu renkleri koyu zemin için desatüre edilip test edildi mi?
• Katmanlar gölge yerine yüzey tonlarıyla ayrıştırılıyor mu?
• Arayüz bileşenlerinin (ikon, kenarlık, odak halkası) kontrastı en az 3:1 mi?
• Kullanıcı, işletim sistemi tercihine göre veya manuel olarak tema değiştirebiliyor mu?

Sonuç

Başarılı bir karanlık mod, renkleri ters çevirmekten çok daha fazlasıdır. Saf siyah yerine koyu gri zeminler, yumuşatılmış metin tonları, WCAG'ye uygun kontrast oranları, desatüre edilmiş vurgu renkleri ve yüzey tonlarıyla kurulan bir derinlik hiyerarşisi, kullanıcıların arayüzünüzü uzun süre rahatça kullanabilmesini sağlar. Bu beş dark mode tasarım hatasından kaçınarak hem estetik hem de erişilebilir bir deneyim oluşturabilirsiniz.