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

Dark Mode Tasarımında Temel Prensipler

Karanlık mod sadece arka planı siyaha çevirmek değildir. Yanlış kontrast göz yorar, okunabilirliği bozar ve erişilebilirlik standartlarını ihlal eder. Modern web tasarım trendlerinde karanlık mod, kullanıcı deneyimini doğrudan etkileyen standart bir gereksinimdir.

Adım 1: Saf Siyahtan (#000000) Kaçının

Saf siyah (#000000) zemin üzerine saf beyaz (#FFFFFF) metin kullanımı yüksek kontrasttan dolayı gözde halelenmeye (halation effect) yol açar. Derinlik algısını yok eder.

• Ana Zemin: Koyu gri tonları tercih edin (örn: #121212, #1E1E1E).
• Yüzey Katmanları: Kart ve modal yapıları için zeminden birkaç ton açık gri (örn: #242424, #2C2C2C) kullanın.

İpucu: Yükseklik ve derinlik hissi için gölgeler yerine yüzey renginin açıklık oranını (lightness) artırın.

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

Erişilebilirlik için WCAG AA standartlarını karşılayın:

• Gövde Metinleri: Arka plan ile metin arasında en az 4.5:1 kontrast oranı.
• Büyük Başlıklar: En az 3:1 kontrast oranı.
• Metin Rengi: #FFFFFF yerine #E0E0E0 veya #EEEEEE gibi kırık beyaz tonları kullanın.

Adım 3: Doygunluğu Azaltılmış (Desaturated) Vurgu Renkleri Seçin

Aydınlık moddaki canlı renkler karanlık zeminde titreşir ve gözü yorar. Renk paletindeki vurgu (accent) renklerinin doygunluğunu (saturation) düşürün, parlaklığını (lightness) dengeli tutun.

• Aydınlık mod primeri: hsl(210, 100%, 50%)
• Karanlık mod karşılığı: hsl(210, 60%, 70%)

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

JavaScript bağımlılığı olmadan native CSS değişkenleri ve prefers-color-scheme medya sorgusu ile performans kaybı yaşamadan geçiş sağlayın.

:root {
  --bg-primary: #ffffff;
  --bg-surface: #f4f4f5;
  --text-primary: #18181b;
  --text-secondary: #71717a;
  --accent: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --bg-surface: #1e1e1e;
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --accent: #60a5fa;
  }
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

Adım 5: Görseller ve İkonlar İçin Optimizasyon

• İllüstrasyonlar: Karanlık temada parlak kalan vektör ve görseller için filter: brightness(0.8) contrast(1.2); uygulayın.
• İkonlar: Katı siyah ikonlar yerine CSS currentColor değerini kullanarak metin rengine otomatik uyum sağlayın.

Dijital Ajanslar İçin Kontrol Listesi

• Kullanıcı tercihi (OS düzeyi) algılanıyor mu?
• Tüm metin katmanları WCAG AA kontrast testinden geçti mi?
• Görsel derinlik gölge yerine ton farkıyla sağlandı mı?
• Manuel tema değiştirme seçeneği localStorage ile kalıcı hale getirildi mi?