Karanlık Mod Tasarımı: Kapsamlı Bir Rehber
#Karanlık Mod#UI Trendleri#Erişilebilirlik

Karanlık Mod Tasarımı: Kapsamlı Bir Rehber

Esma Nur Ertay
Esma Nur Ertay
28 Ağu 2023 · 12 dk

Karanlık Mod Neden Önemli?

Karanlık mod, son yıllarda popülerliği artan bir arayüz trendi olmanın ötesinde, kullanıcı sağlığı ve erişilebilirlik açısından önemli avantajlar sunar. Akşamları göz yorgunluğunu azaltır, OLED ekranlarda pil ömrünü uzatır ve düşük ışıklı ortamlarda kullanım kolaylığı sağlar.

Teknik Uygulama

  • CSS Değişkenleri: Renk paletlerini değişkenlerle yönetmek
  • Prefers-color-scheme: Sistem tercihlerini algılama
  • Geçiş Animasyonları: Mod değişikliğinde yumuşak geçişler

Renk Seçimleri

Saf siyah (#000000) yerine koyu gri tonları (örneğin #121212) kullanmak, kontrast sorunlarını azaltır ve daha rahat bir görüntü sağlar. Metin renkleri için %87 opaklıkta beyaz (#FFFFFF) iyi bir başlangıç noktasıdır.

Erişilebilirlik Testleri

Karanlık mod tasarımı, aydınlık mod kadar dikkatli kontrast testleri gerektirir. WCAG AA standardına göre metin ve arka plan arasında en az 4.5:1 kontrast oranı sağlanmalıdır.

Karanlık Mod Tasarımı: Kapsamlı Bir Rehber - Görsel 1

Karanlık mod ve aydınlık mod karşılaştırması

Karanlık Mod Tasarımı: Kapsamlı Bir Rehber - Görsel 2

Makale görseli 2