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

Dark Mode Tasarımı ve Modern Web Standartları

Karanlık mod (dark mode), modern web tasarımında kullanıcı deneyimini doğrudan etkileyen temel gereksinim haline geldi. Başarılı bir dijital ajans yaklaşımı, karanlık modu sadece renkleri tersine çevirmek (invert) olarak görmez. Göz yorgunluğunu azaltan, pil tasarrufu sağlayan ve görsel hiyerarşiyi koruyan sistemli bir renk mimarisi kurar.

Adım 1: Saf Siyah (#000000) Kullanımından Kaçınma

Saf siyah arka plan üzerine saf beyaz (#FFFFFF) metin yerleştirmek yüksek kontrast nedeniyle gözü yorar ve 'halation' (ışık saçılması) etkisine yol açar.

• Koyu Gri Zemin: Ana arka plan için #121212, #1E1E1E veya #242424 gibi koyu gri tonları seçin.
• Yumuşak Metin: Ana metinlerde #E0E0E0 veya #EEEEEE kullanarak keskinliği düşürün.
• Göz Konforu: Koyu gri zemin ışık saçılmasını engeller, derinlik algısını kolaylaştırır.

Adım 2: Katman ve Yükseklik (Elevation) Hiyerarşisi Kurma

Aydınlık modda derinlik gölgelerle (box-shadow) sağlanırken, karanlık modda gölgeler görünmez. Derinlik, yüzey açıklığı (lightness) ile verilir.

• Zemin Katmanı (0dp): En koyu ton (Örn: #121212).
• Kart / Kartvizit Katmanı (1dp - 4dp): Yüzey rengine %5 ila %10 beyaz katılmış ton (Örn: #1E1E1E, #2D2D2D).
• Modal / Dialog Katmanı (8dp+): En açık koyu ton (Örn: #383838).

Adım 3: Doygunluk (Saturation) Seviyelerini Düşürme

Aydınlık temada kullanılan canlı renkler, koyu arka planda görsel titreşime neden olur ve okunabilirliği bozar.

• Doygunluk Azaltma: Marka renklerinin doygunluğunu (saturation) %20-40 oranında düşürün.
• Pastel Tonlar: Koyu zeminde pastel ve açık tonlu vurgu renkleri tercih edin.
• Erişilebilirlik: Buton ve link renklerinin arka planla kontrastını test edin.

Adım 4: WCAG Kontrast Standartlarını Doğrulama

Web Content Accessibility Guidelines (WCAG) 2.1 AA ve AAA seviyelerine uyum sağlamak zorunludur.

• Normal Metin: Arka plan ile metin arasında minimum 4.5:1 kontrast oranı sağlayın.
• Büyük Metin (18pt+ veya 14pt Bold): Minimum 3:1 kontrast oranı yakalayın.
• UI Bileşenleri ve Kenarlıklar: Minimum 3:1 kontrast oranına dikkat edin.

Adım 5: CSS Değişkenleri ile Native Uygulama

Modern web projelerinde dark mode entegrasyonu CSS Custom Properties ve prefers-color-scheme medya sorgusu ile native olarak çözülür:

:root {
  --bg-primary: #ffffff;
  --text-primary: #171717;
  --surface: #f4f4f5;
}

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

[data-theme="dark"] {
  --bg-primary: #121212;
  --text-primary: #ededed;
  --surface: #1e1e1e;
}

Özet Kontrol Listesi

1. Saf siyah arka plan yerine koyu gri (#121212) kullanıldı mı?
2. Tüm metin kontrastları WCAG AA (4.5:1) testinden geçti mi?
3. Vurgu renklerinin doygunluğu azaltıldı mı?
4. Derinlik için gölge yerine yüzey aydınlığı kullanıldı mı?
5. Sistem tercihi (prefers-color-scheme) destekleniyor mu?