Responsive tasarım sadece boyut ve layout ile sınırlı değildir; renk ve kontrast da farklı ekranlarda, farklı kullanıcı tercihlerinde optimize edilmelidir. Bu rehberde medya sorguları ile tema yönetimi, dark mode, reduced motion ve renk adaptasyonu konularını ele alıyoruz.
Medya Sorguları ile Tema Yönetimi
CSS custom properties (değişkenler) ile renk paletini merkezi hale getirip, prefers-color-scheme ve prefers-contrast gibi medya sorguları ile kullanıcı tercihlerine uyum sağlayabilirsiniz.
:root {
--bg: #f8fafc;
--text: #1e293b;
--accent: #3b82f6;
--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--text: #f1f5f9;
--accent: #60a5fa;
--gradient-hero: linear-gradient(135deg, #4c1d95 0%, #1e1b4b 100%);
}
}
Koyu temada gradientlerin tonlarını hafifçe koyulaştırarak hem görsel denge hem de okunabilirlik sağlanır.
Dark Mode ve Gradient Uyumu
Koyu arka planlar üzerinde çok parlak gradientler göz yorar. Koyu temada gradientleri daha düşük doygunlukta ve daha koyu tonlarda kullanın. Ayrıca gradient üzerindeki metin kontrastına dikkat edin; WCAG kontrast rehberi bu konuda yol göstericidir.
Ekran Boyutuna Göre Renk Ayarları
Bazı durumlarda mobilde daha sade, masaüstünde daha zengin paletler kullanılabilir. Örneğin büyük ekranlarda hero bölümünde üç renkli gradient, mobilde iki renkli daha basit bir gradient tercih edilebilir. Bu sayede hem performans hem görsel karmaşa kontrol altında tutulur.
Reduced Motion ve Animasyon
Hareket hassasiyeti olan kullanıcılar için prefers-reduced-motion: reduce medya sorgusunu kullanın. Animasyonlu gradient veya renk geçişlerini bu kullanıcılar için devre dışı bırakın.
@media (prefers-reduced-motion: reduce) {
.animated-bg {
animation: none;
background: linear-gradient(90deg, #667eea 50%, #764ba2 50%);
}
}
Kontrast Tercihleri
prefers-contrast: high veya prefers-contrast: more ile yüksek kontrast tercih eden kullanıcılar için metin/arka plan farkını artırabilirsiniz. Gradient arka planlarda bu durumda metin gölgesi veya arka plan overlay eklemek faydalı olur.
JavaScript ile Tema Değiştirme
Kullanıcıya light/dark seçeneği sunuyorsanız, hem sistem tercihini hem de manuel seçimi destekleyin. prefers-color-scheme varsayılanı belirler; kullanıcı toggle ile değiştirirse bu tercih localStorage ile saklanabilir ve data-theme="dark" gibi bir atribüt ile uygulanabilir.
[data-theme="dark"] {
--bg: #0f172a;
--text: #f1f5f9;
--gradient-hero: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
}
Sonuç
Responsive renk tasarımı, kullanıcı tercihlerine saygı gösteren erişilebilir bir deneyim sunar. CSS değişkenleri ve medya sorguları ile tek bir kaynaktan tüm tema varyasyonlarını yönetebilirsiniz. Gradient Oluşturucu ile paletinizi oluşturup light/dark varyasyonlarını test edebilirsiniz.
İlgili rehberler: Renk Körlüğü ve Erişilebilirlik · Gradient Animation · CSS Gradient Nedir? · Araç · Marka Renkleri