Arayüz Renk Paleti: Uyum, Kontrast ve Erişilebilirlik
Renk paleti seçmek çoğu yazıda renk çarkıyla anlatılır: yan yana duran tonları alırsan uyumlu, karşılıklı duranları alırsan canlı bir palet çıkar. Arayüzde bu tarifin bir açığı var. Çarktaki konum tonu belirler, metnin okunup okunmadığını belirleyen şey ise açıklık, ve iki renk çarkta ne kadar uyumlu görünürse görünsün kontrast oranı bundan bağımsız hesaplanır.
Uyumlu palet, okunmayan metin
En açık örnek komplemanter çift. Kırmızı ve yeşil çarkta tam karşı karşıya durur, ders kitabı tanımına göre kusursuz bir zıtlıktır. Kontrast oranını hesaplayınca tablo değişiyor.
WCAG'in kontrast formülü tonu değil bağıl parlaklığı kullanır ve yeşil kanalına kırmızıdan çok daha yüksek ağırlık verir. Saf kırmızının (#FF0000) bağıl parlaklığı 0,2126; saf yeşilinki (#00FF00) 0,7152. Oran, ikisine de 0,05 eklenip bölündüğünde 2,9:1 çıkar. Normal boyutlu metin için AA seviyesinin istediği eşik 4,5:1. Yani çarkın en dramatik zıtlığı, gövde metninde kullanıldığında erişilebilirlik testinden geçmez.
Buradan çıkan pratik sonuç şu: renk uyumu paletin hangi tonlardan kurulacağını söyler, hangi tonun hangi zeminde metin olabileceğini söylemez. İkisi ayrı iki karar, ve ikincisi ölçümle verilir.
Hangi çark
Renk çarkı anlatılırken ana renkler genelde kırmızı, sarı ve mavi diye sayılır. Bu boya karışımının modeli. Ekran bu şekilde çalışmıyor: monitör kırmızı, yeşil ve mavi ışığı toplayarak renk üretir, o yüzden CSS'te yazdığınız her #RRGGBB değeri toplamalı modelin içinde durur. Sarıyı ana renk sayan bir çarkla, kanalları RGB olan bir ekranda çalışmak birbirini tutmuyor.
Bu ayrımın günlük karşılığı, sarının ekranda ne kadar parlak olduğu. #FFFF00 üzerine beyaz metin koymak, çarkta ne yaparsanız yapın okunmaz bir sonuç verir; aynı sarı siyah metnin altında zemin olarak çok iyi çalışır. Tonun kendisi değil, parlaklığı karar veriyor.
Paleti kurma sırası
İşe tonla değil, açıklık merdiveniyle başlamak zamandan kazandırıyor. Yaklaşık sıra:
- Marka renginizi HSL'ye çevirin. Ton ve doygunluğu sabit tutup açıklığı düzenli aralıklarla değiştirerek sekiz on basamaklı bir merdiven çıkarın.
- Her basamağın beyaz ve siyah metinle kontrast oranını ölçün. Merdivenin bir yerinde eşik geçilir; o nokta, o rengin zemin olarak kullanılabileceği sınırdır.
- Vurgu rengini bu ölçümden sonra seçin. Vurgu, tıklanabilir olanı işaret ettiği için hem zeminle hem komşu metinle arasında yeterli fark olması gerekiyor.
- Nötrleri unutmayın demeyeceğim, çünkü asıl iş nötrlerde: arayüzün büyük bölümü gri tonlarıyla kurulur, marka rengi küçük bir yüzeyde durur.
Merdiveni HSL'de kurmak, hex'le uğraşmaktan çok daha hızlı ilerliyor (aynı işi hex kodlarını elle deneyerek yapmak zaman kaybı). Ton sabit kalınca basamaklar birbirinin akrabası olur, palet de kendiliğinden tutarlı görünür.
Sık duyulan 60-30-10 dağılımı bu aşamada bir kontrol aracı olarak işe yarar: paletinizi bir ekranda uyguladıktan sonra yüzeylerin ne kadarının hangi renge gittiğine bakın. Vurgu rengi ekranın onda birinden fazlasını kaplıyorsa artık vurgu değildir. Bunu bir kural gibi baştan uygulamaya çalışmak ise gereksiz, tasarımı ölçmeye değil orana uydurmaya çalışırsınız.
Rengi tek başına bilgi taşıyıcısı yapmamak
Hata mesajları kırmızı, başarı mesajları yeşil. Bu alışkanlık tutarlılık açısından doğru, ama bilginin tamamını renge yüklerse eksik kalır. Kırmızı-yeşil ayrımını güçlükle yapan kullanıcı oranı azımsanacak gibi değil ve bu kullanıcılar için iki mesaj kutusu aynı görünür.
Çözüm pahalı değil. Renge bir ikon, bir metin etiketi ya da kenar çizgisi farkı ekleyin. Formda hatalı alanı yalnızca kırmızı çerçeveyle işaretlemek yerine alanın altına hatanın ne olduğunu yazın; bu zaten renkten bağımsız olarak daha iyi bir arayüz.
Aynı mantık grafikler için de geçerli. Yalnızca renkle ayrılan çizgiler yerine çizgi desenini ya da doğrudan etiketi kullanmak, lejantla grafik arasında gidip gelmeyi de ortadan kaldırır.
Kod tarafında palet
Palet bir tasarım dosyasında yaşadığı sürece kayıyor. Renkleri CSS özel değişkenleri olarak tek yerde tanımlayıp bileşenlerde yalnızca değişken adı kullanmak, hem koyu tema eklemeyi hem de bir tonu sonradan değiştirmeyi tek dosyalık işe indirir. Bileşenin içine doğrudan yazılmış bir hex kodu, altı ay sonra kimsenin bulamadığı istisnaya dönüşüyor.
Renk formatları arasındaki tercih de bu yüzden pratik bir mesele. rgba() ve hsla() saydamlık verir, gölge ve katman efektlerinde işe yarar. hsl() ise ton merdivenini okunur tutar: bir bakışta hangi değerin daha koyu olduğunu görürsünüz, #3B5F8A ile #2E4A6B arasında aynı şey söylenemez.
Ölçmeden emin olunmaz
Kontrast denetleyicileri (WebAIM'in aracı, tarayıcı geliştirici konsolundaki kontrast göstergesi) saniyeler içinde sonuç veriyor, o yüzden tahmin yürütmenin bir gerekçesi yok. Eşikler net: normal metin için 4,5:1, büyük başlıklar için 3:1, AAA hedefliyorsanız 7:1. Düğme kenarı, form alanı çerçevesi gibi arayüz bileşenlerinin de zeminle arasında en az 3:1 olması bekleniyor, bu madde sık atlanıyor.
Paletin son sınavı da monitör değil. Aynı ekranı telefonda, güneş altında ve gece modunda açın. Kontrastı sınırda geçen renkler ilk orada dökülür.