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

Dark Mode Tasarımı Neden Kritik?

Karanlık mod artık opsiyonel değil, modern web standardı. Yanlış kontrast göz yorar, pil tüketimini artırır ve erişilebilirliği bozar. Profesyonel bir dijital ajans yaklaşımıyla dark mode renk paleti ve kontrast matematiğini adım adım kurun.

Adım 1: Saf Siyah (#000000) Yerine Koyu Gri Taban Seçin

Saf siyah zemin üzerine saf beyaz metin yüksek halelenme (halation) etkisi yaratır. OLED ekranlarda pikselleri tamamen kapatsa da okuma ergonomisini düşürür.

• Yüzey (Surface) Rengi: #121212 veya #1E1E1E kullanın.
• Yükseklik (Elevation) Katmanları: Derinlik için gölge yerine yüzey rengini açın (Z-index arttıkça ton açılır; örn. kartlar için #242424).

Adım 2: WCAG Kontrast Standartlarını Koruyun

Dark mode tasarımında WCAG 2.1 AA ve AAA standartları esnetilemez.

• Gövde Metni: Zeminle metin arasında en az 4.5:1 kontrast oranı sağlayın.
• Büyük Başlıklar: Minimum 3:1 kontrast oranı yeterlidir.
• Metin Rengi: #FFFFFF yerine #E1E1E1 veya #E4E6EB kullanarak göz yorgunluğunu engelleyin.

Adım 3: Doygunluğu Düşürülmüş (Desaturated) Vurgu Renkleri Belirleyin

Açık temadaki parlak ve doygun renkler koyu zeminde titreşir ve kontrast testlerini geçemez.

• Birincil renklerin doygunluğunu (saturation) %20-30 azaltın.
• Parlaklığı (lightness) %10-20 artırarak koyu zeminde görünür kılın.
• Hata (kırmızı), başarı (yeşil) ve uyarı (sarı) durum renklerini pastel tonlara çekin.

Adım 4: CSS Değişkenleri ve Native Media Query Kullanımı

Modern CSS özellikleri harici kütüphane gerektirmeden tema geçişini çözer.

:root {
  --bg-color: #ffffff;
  --text-color: #121212;
  --card-bg: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
  }
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --card-bg: #1e1e1e;
}

Adım 5: Görsel ve Medya Parlaklığını Dengeleyin

Parlak beyaz arka plana sahip ürün fotoğrafları karanlık temada göz alır.

• Görsellere karanlık modda hafif parlaklık filtresi ekleyin: filter: brightness(0.85) contrast(1.1);
• SVG ikonlarda sabit hex kodları yerine currentColor kullanarak metin rengiyle senkronize edin.

Tasarım trendleri görsel estetik kadar erişilebilirliği hedefler. Kontrast testleri için browser devtools ve Stark/WebAIM araçlarını her iterasyonda çalıştırın.