Koyu modda saf siyah kullanmayın.

Koyu mod artık dar bir kitlenin ayarı değil. Ama çoğu koyu tema yanlış siyaha yöneliyor. Saf siyah, yani #000000, renk örneğinde güçlü, ekranda ise yorucu görünür. Koyu temanız insanlara gözlerini kıstırıyorsa nedeni genellikle budur.

Google bunu Material Design geliştirirken öğrendi. Önerilen yüzey rengi siyah değil, #121212 koyu gri oldu. Neden zevk değil, gözün çalışma ve karanlıkta derinliği algılama biçimidir. İşte gerçekten önemli kurallarla pratik açıklaması.

Temel çıkarımlar

• #000000 ile başlamayın. Material Design’ın önerdiği #121212 civarında koyu griyi tuval olarak kullanın.
• Saf siyah üzerinde beyaz metin ekranın üretebileceği en yüksek kontrasttır. Işık saçılması ve göz yorgunluğu yaratır. Astigmatı olanlar daha çok etkilenir.
• Derinliği gölgeyle değil ışıkla kurun. Karanlıkta daha yüksek yüzey daha açıktır.
• Marka renklerinin doygunluğunu azaltıp açın, sonra kontrastı yeniden kontrol edin. Beyazda geçen renk koyu zeminde sıklıkla başarısız olur.
• Koyu mod, açıp kapatılan filtre değil, kendi kuralları olan ayrı bir tasarımdır.

Saf siyah neden yanlış varsayılandır?

Çünkü kontrastı yararlı olduğu noktanın ötesine taşır. Saf siyah üzerinde beyaz, ekranın üretebileceği en yüksek kontrasttır. Bedelini göz öder. Harflerin kenarında ışık yayılır. Halasyon denen bu etki astigmatı olanları en çok zorlar. Material Design yönergeleri de aynı şeyi söyler: koyu gri yüzeyde açık metnin kontrastı siyahtakinden düşüktür. Gri, göz yorgunluğunu azaltır.

Bu küçük bir an değildir. Yorucu koyu tema, onu açan her okuyucuyla karşılaşır. Uzun okuma seanslarında insanı üründen yavaşça yorar. Koyu modun amacı rahatlıktır. En yüksek kontrast bu amacı sessizce yok eder.

Arka plan hangi renk olmalı?

Siyah değil koyu gri. Material Design temel yüzey olarak #121212 önerir. Başlamak için iyi bir yerdir. Hâlâ koyu ve nitelikli görünür, ama okuyucuyla mücadeleyi bırakır. Saf siyah bütün mekân yerine seyrek kullanılan vurgu olur.

Gerçek bir ödünleşim vardır. OLED ekranlarda gerçek siyah pikseller kapanır ve enerji tasarrufu sağlar. Bazı uygulamalar bu yüzden #000000 kullanır. Ancak yüzeyleriniz gerçek içerik taşır: parlak fotoğraflar, renkli kartlar, canlı marka görselleri. Saf siyaha karşı hepsi sert kontrasta dönüşür. İnsanların bir andan uzun baktığı veya okuduğu içerikte küçük pil tasarrufu bu yorgunluğa değmez.

Gölgesiz derinlik nasıl kurulur?

Yüzeyi altına gölge bırakarak değil, rengini açarak yükseltirsiniz. Açık temada yükselti gölgeden gelir. Karanlıkta gölgenin düşeceği yer yoktur, kaybolur. Material yüzey yükseldikçe onu açarak çözer. Katman ne kadar yüksekse beyaza o kadar yaklaşır.

Teknik olarak bu, #121212 tabanının üstüne yerleştirilen yarı saydam beyaz katmandır. Yüzey yükseldikçe katman daha opak olur. Matematiğe değil, kurala ihtiyacınız var. Daha yüksek, daha açık demektir. Bu hareket koyu arayüze, düz siyah boşlukta kaybedeceği katmanları verir.

Sayıları isterseniz Material yayımlıyor:

Kaynak: Material Design, koyu tema.

Marka renkleri ne olacak?

Yumuşatın. Beyaz sayfada iyi görünen doygun renkler koyu zeminde titreşir ve gözü yorar. Doygunluğu azaltın, renkleri açın ve sakinleştirin. Amaç yüksek ses değil, okunabilirlik ve rahatlıktır.

Sonra kontrastı yeniden kontrol edin. Koyu mod eski varsayımları bozar. Beyazda WCAG AA 4.5 to 1 eşiğini geçen metin rengi koyu zeminde başarısız olabilir. Koyu temayı kendi başına test edin. Farklı hesapları olan farklı bir yüzeydir.

Koyu mod ayrı bir tasarımdır

En sonda açılan bir filtre değildir. Aynı ürünün kendi tuvali, derinlik modeli ve renkleri olan ikinci tasarımıdır. #121212 civarında koyu gri seçin, yüzeyleri ışıkla yükseltin, renkleri yumuşatın ve her kontrast değerini yeniden kontrol edin. Hiçbiri zor değildir. Bunların tümü, insanların kaldığı temayla terk ettiği tema arasındaki farktır.

Arayüzün kolay hissettirmesini sağlayan şeylerin çoğu böyle küçük kurallardır. Etkisi büyük başka bir kural için, düğmelerinizin kolay mı zor mu kullanılacağını Fitts Yasası’nın nasıl belirlediğini aşağıda okuyabilirsiniz.