Koyu Mod Erişilebilirliği: Kontrastı Artırmak Neden Ters Teper

Koyu mod tartışması çoğunlukla estetikte takılı kalıyor: şık mı, göz yorgunluğunu gerçekten azaltıyor mu. Asıl soru daha dar bir yerde duruyor. Aynı arayüz, ışığa duyarlı bir kullanıcıyla astigmatı olan bir kullanıcıya aynı anda nasıl hizmet edecek? Edemiyorsa hangisini varsayılan kabul edeceğiz?

Aynı özellik, zıt iki deneyim

Işığa duyarlılığı olan biri için iyi kalibre edilmiş koyu tema gerçek bir rahatlama sağlıyor. Parlama düşüyor, loş bir odada ekran odayı aydınlatan bir fener olmaktan çıkıyor, uzun okuma seansları daha az yoruyor.

Astigmatı olan kullanıcıda tablo tersine dönüyor. Gözdeki düzensiz kırılma, koyu zemindeki açık renk harflerin kenarlarını dışa taşırıyor. Harf şişiyor, kelime bulanıklaşıyor, satır aralığı gözle görülür şekilde daralmış gibi duruyor. Buna halelenme deniyor ve koyu modun herkes için okunabilirliği artırmadığı tartışmasının merkezinde bu duruyor.

Peki iki grubun ortasında bir ayar noktası var mı? Burada işin ilginç tarafı şu: ikisi de aslında aynı şeyden şikâyet ediyor, parlaklık farkının büyüklüğünden. Işığa duyarlı kullanıcı toplam ışıktan, astigmatlı kullanıcı harf ile zemin arasındaki keskin sıçramadan rahatsız. Yani ortak çözüm var, ama sezginin tersi yönde.

Kontrast eşiği bir taban, hedef değil

WCAG'in metin için istediği 4.5:1 oranı asgari bir sınır. Formül simetrik çalışır, yani iki rengin hangisinin zemin hangisinin yazı olduğunu umursamaz; açık temada geçen bir çift, koyu temada da geçer. Tam olarak bu yüzden standarda uymak koyu modda okunabilirliği garanti etmiyor.

Sayılara bakmak meseleyi netleştiriyor. Saf beyaz metin saf siyah zeminde 21:1 verir, ölçeğin tepesi. Herkesin önerdiği yumuşatılmış kombinasyon, #E0E0E0 metin ile #121212 zemin, yaklaşık 16:1 civarında kalır. Yani sektörün "yumuşak" dediği palet bile asgari eşiğin üç katından fazla. Halelenmeyi tetikleyen bölge burası, eşiğin yakını değil.

Sonuç pratikte şu anlama geliyor: koyu modda kontrast bir kalite göstergesi gibi davranmayı bırakıyor. "Mümkün olduğunca yüksek kontrast" tavsiyesi açık temadan devralınmış bir alışkanlık ve koyu temada ters çalışıyor. Metin gövdesini 21:1'den 10:1 bandına çekmek, hâlâ eşiğin iki katı olduğu için standarda uygun kalır ve harflerin taşmasını gözle görülür şekilde azaltır. WebAIM kontrast denetleyicisi gibi bir araçla bu bandı ayarlamak birkaç dakikalık iş.

Düğme, bağlantı, form etiketi gibi etkileşimli öğelerde tersi geçerli. Onlar gövde metniyle aynı ton ailesinde kalırsa arayüz düzleşiyor ve kullanıcı tıklanabilir olanı ararken zaman kaybediyor. Gövdeyi yumuşat, aksiyonu ayrıştır.

Halelenmeyi büyüten şey aslında tipografi

Aynı renk çiftiyle iki farklı yazı tipi tamamen farklı sonuç verebiliyor. İnce ağırlıklar koyu zeminde en çok bozulanlar; ince bir gövde, kenar yumuşatmanın eklediği yarı saydam piksellerle birlikte neredeyse gri bir bulanıklığa dönüşüyor.

Buradaki yaygın refleks, koyu temada yazıyı kalınlaştırmak. Bu da yarım çözüm. Açık renk metin koyu zeminde zaten optik olarak kalın görünür, üstüne bir ağırlık daha eklendiğinde harf içi boşluklar kapanmaya başlar. Uygulamada işe yarayan yöntem, koyu temada gövde metnini açık temadakinden bir ağırlık aşağı almak, punto ve satır aralığını ise biraz yukarı çekmek.

Kenar yumuşatma tarafında tarayıcılar arası davranış hâlâ tutarsız. font-smooth ailesindeki CSS özellikleri bazı platformlarda durumu düzeltiyor, bazılarında hiçbir şey yapmıyor. Bu yüzden tipografiyi kurtarma işini bu özelliklere yıkmamak gerekiyor; renk ve ağırlık doğru seçilmişse zaten ihtiyaç kalmıyor.

Görme engeli tek bir başlık değil

Renk körlüğü için kırmızı ve yeşili yan yana koymamak yerleşmiş bir kural, ama görme engelinin küçük bir bölümü. Koyu temada birbirinden ayrışan ihtiyaçlar şöyle:

• Düşük görüş: ölçeklenebilir metin ve tahmin edilebilir bir düzen. Kullanıcı tarayıcıdan yazıyı %200 büyüttüğünde koyu tema hâlâ ayakta kalıyor mu, test edilmesi gereken şey bu.
• Işığa duyarlılık: koyu zemin üzerindeki parlak öğelerin sayısı. Tek bir beyaz kart, koyu bir sayfada açık temadaki tüm sayfadan daha rahatsız edici olabiliyor.
• Katarakt ve saçılma: parlamayı azaltmak, saf siyah yerine koyu gri zemin, düşük doygunluklu vurgu renkleri.
• Merkezi görme kaybı: kritik bilgiyi ekranın ortasında tek bir noktaya sıkıştırmamak, aynı bilgiyi metin olarak da vermek.

Bu listenin dürüst okuması şu: hepsini aynı anda memnun eden tek bir palet yok. Ayarlanabilirlik olmadan her seçim birilerini dışarıda bırakıyor.

O zaman karar kullanıcının olsun

Buradan çıkan sonuç, koyu modu bir tasarım kararı olmaktan çıkarıp bir tercih haline getirmek. Sistem ayarını prefers-color-scheme ile okuyup başlangıç değeri olarak kullan, sonra kullanıcıya arayüz içinden değiştirme imkânı ver ve seçimi kalıcı olarak sakla. Üç parçanın üçü de gerekli: sadece sistem ayarını dinleyen bir site, telefonunu gece moduna almış ama koyu tema okumakta zorlanan kullanıcıyı her seferinde aynı yere hapsediyor.

Sıradaki adım, ikili anahtarın ötesine geçmek. Metin parlaklığı için üç kademeli bir ayar, koyu temada kontrast bandını kullanıcının kendi gözüne göre kaydırmasına izin veriyor ve uygulaması tek bir CSS değişkenini değiştirmekten ibaret. Ayrı bir "yüksek kontrast" temasından çok daha az bakım istiyor.

Geriye test meselesi kalıyor. Her cihazı, her ekran teknolojisini, her aydınlatma koşulunu denemek mümkün değil (bu tavsiyeyi ciddi ciddi veren yazıları pratikte hiç uygulanabilir bulmadım). Yapılabilir olan daha küçük: paleti bir OLED telefonda ve bir de ucuz IPS panelde açmak, yazıyı %200 büyütmek, sayfayı gündüz pencere önünde bir kez okumak. Kalanı geri bildirimle düzeltilir.