Dark Mode Tasarımı: Doğru Kontrast ve Renk Paleti Seçim Rehberi

Dark Mode Tasarımına Giriş ve Temel İlkeler

Karanlık mod arayüzleri sadece estetik tercih değil, modern kullanıcı deneyiminde pil tasarrufu ve göz konforu sağlayan temel bileşendir. Başarılı karanlık mod entegrasyonu için tersine çevrilmiş renkler yerine sistematik renk teorisi uygulanmalıdır.

Saf Siyah (#000000) Tuzağı

Geliştiricilerin en sık yaptığı hata arka planda #000000, metinde #FFFFFF kullanmaktır. Bu aşırı kontrast, 'halasyon etkisi' (ışık saçılması) yaratarak gözü yorar. Önerilen zemin rengi: #121212 veya #1E1E1E gibi koyu gri tonlarıdır.

Adım Adım Karanlık Mod Renk Mimarisi

1. Zemin ve Katman (Elevation) Seviyeleri

Aydınlık modda derinlik gölgelerle (box-shadow) verilir. Karanlık modda gölgeler görünmez; derinlik yüzey açıklığı (surface lightness) ile sağlanır:

• Seviye 0 (Taban Arka Plan): #121212
• Seviye 1 (Kartlar / Paneller): #1E1E1E (+%5 beyaz opaklık)
• Seviye 2 (Açılır Menüler / Modallar): #242424 (+%8 beyaz opaklık)
• Seviye 3 (Üst Katman Diyaloglar): #2C2C2C (+%12 beyaz opaklık)

2. Renk Doygunluğunu (Saturation) Azaltma

Aydınlık moddaki canlı marka renkleri koyu zeminde titreşir. Bu nedenle vurgu renklerinin doygunluğu (vibrancy) düşürülmelidir. Örneğin:

• Aydınlık Mod Birincil Renk: #0055FF (Doygunluk: %100)
• Karanlık Mod Birincil Renk: #82B1FF (Doygunluk: %40-60 aralığına çekilmiş pastel ton)

3. WCAG 2.1 Kontrast Oranlarını Sağlama

Erişilebilirlik standartları, metin ile arka plan arasında belirli kontrast oranları zorunlu kılar:

• Gövde Metni: Minimum 4.5:1 kontrast (Metin için rgba(255, 255, 255, 0.87) önerilir).
• Büyük Başlıklar / İkonlar: Minimum 3.0:1 kontrast.
• Devre Dışı / İkincil Metinler: rgba(255, 255, 255, 0.60) seviyesi altına inilmemelidir.

Uygulama: CSS Değişkenleri ile Dijital Strateji

Modern web mimarisinde karanlık mod tek satır JavaScript yazmadan yerel CSS özellikleriyle çözülmelidir:

:root {
  --bg-base: #F8F9FA;
  --text-main: #1A1A1A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #121212;
    --text-main: rgba(255, 255, 255, 0.87);
  }
}

Sık Yapılan Hatalar ve Trendler

• İmaj ve İllüstrasyon Kontrastı: Parlak görseller karanlık modda patlama yapar. CSS ile filter: brightness(0.8) uygulanmalıdır.
• Bordür Kullanımı: Katman sınırlarını belirlemek için kalın çizgiler yerine 1px solid rgba(255, 255, 255, 0.08) kullanılmalıdır.
• Yarı Saydamlık: Düz renkler yerine alpha kanalı (rgba/hsla) kullanımı, alt katmanla doğal uyum sağlar.