Glassmorphism'i Erişilebilir Kullanmanın Sınırları

Glassmorphism'in tasarım tarafı beş dakikada kurulur: biraz bulanıklık, düşük opaklıkta bir zemin, ince bir kenar çizgisi. Zor olan kısmı, panelin arkasından ne geçerse geçsin üstündeki metnin okunur kalması. Bu yazı efektin nasıl yapılacağından çok, nerede kırıldığı ve o kırılmayı sayıyla nasıl önleyeceğinle ilgili.

Efektin üç parçası

Cam hissi üç değerden çıkar: arkayı bulanıklaştıran filtre, panelin yarı saydam zemini, ve kalınlık izlenimi veren açık renkli kenar.

.panel { backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.3); }

Bu üçünden yalnızca ikincisi okunabilirliği belirler. Gerisi görünüş meselesi.

Kontrast tek bir sayı değil

Panelin üstündeki metnin kontrast oranını hesaplayamazsın, çünkü altındaki zemin sabit değil. Sayfa kaydıkça panelin arkasından bazen beyaz bir alan, bazen koyu bir görsel geçer ve oran onunla birlikte değişir.

Somut haliyle: rgba(255,255,255,0.25) zeminli bir panelin üstünde #111111 metin, arkada beyaz varken 18:1'in üzerinde bir kontrast verir. Aynı panel koyu bir fotoğrafın üzerine geldiğinde bileşik zemin gri tonuna düşer ve oran 2.2:1 civarına iner. WCAG'ın normal metin için istediği alt sınır 4.5:1, yani aynı bileşen bir konumda fazlasıyla geçerken diğerinde açık şekilde kalıyor.

Buradaki yaygın yanılgı, bulanıklığı arttırmanın sorunu çözeceği. Çözmez. Blur komşu pikselleri ortalar, ortalama parlaklığı taşımaya devam eder; bulanıklaştırılmış açık bir görsel hâlâ açıktır, koyu olan hâlâ koyudur. Kontrast tabanını yükselten tek şey zeminin alfa değeri.

Alfayı hesapla, gözle ayarlama

Yapılacak iş, en kötü durumu baştan kabul edip alfayı ona göre seçmek. Beyaz zemin ve #111111 metin için, arkada tamamen siyah bir alan olsa bile 4.5:1'i tutturmak istiyorsan alfanın yaklaşık 0.45'in altına inmemesi gerekir. Metin rengi açıldıkça bu eşik yukarı çıkar.

0.45 alfa ile efektin cam hissi belirgin biçimde azalır. Kabul edilebilir iki çıkış yolu var. Ya paneldeki metni büyük metin sınıfına sokarsın (24px, ya da 18.66px kalın), o zaman eşik 3:1'e düşer ve daha düşük alfa ile çalışabilirsin. Ya da camı yalnızca dekoratif yüzeyde bırakıp metin bloğunun altına opak bir kutu koyarsın. İkinci yol daha güvenli, çünkü içerik değiştiğinde hesabı tekrar yapman gerekmez.

Nerede ödeme yaparsın

backdrop-filter kullanan öğe kendi kompozisyon katmanına alınır ve arkasındaki içeriği o katmana yeniden örnekler. Panel ya da arkasındaki içerik hareket ettiği sürece bu iş her karede tekrarlanır. Sabit bir başlığın altından uzun bir liste kaydırıldığında maliyeti doğrudan hissedersin, özellikle orta seviye Android cihazlarda.

Pratik sınır: sayfada aynı anda bulanıklık uygulayan öğe sayısını tek haneli tut, blur yarıçapını animasyonla değiştirme (geçiş boyunca her karede yeniden hesaplanır), ve liste öğelerinin her birine ayrı ayrı verme. Kart ızgarasının tamamını cam yapmak, tasarım olarak da abartılı görünüyor.

Kullanıcının ayarına uy

İşletim sistemi düzeyinde saydamlığı azaltan bir tercih var ve tarayıcı bunu sana veriyor. Bu tercihi görmezden gelen arayüz, tam da efektten en çok rahatsız olan kullanıcıya efekti dayatmış olur.

@media (prefers-reduced-transparency: reduce) { .panel { backdrop-filter: none; background: #ffffff; } }

Aynı opak kuralı @supports ile filtreyi desteklemeyen tarayıcılara da ver. Böylece cam, olmadığında bozulan bir gereklilik değil, olduğunda eklenen bir katman olur.

Özetle karar şu: glassmorphism bilgi kartı, bildirim, kayan menü gibi ön plana çıkması gereken az sayıda yüzeyde iyi çalışır. Kritik metnin taşıyıcısı yapıldığında ise kontrast hesabını sürekli yeniden yapmayı göze almış olursun, ve o hesap çoğu ekipte bir süre sonra yapılmaz. Erişilebilirlik kriterlerinin tam metni için WCAG 2.2 kaynağına bakabilirsin.