Android Renk Paleti Uygulamaları ve Kontrastın Söylemedikleri
Telefonla renk yakalamak kolay: kamerayı tut, HEX kodunu al. Zor olan, o kodun projede işe yarayıp yaramadığını anlamak. Aşağıda Android'de gerçekten kullanılan beş araç var, bir de hiçbirinin sana söylemediği şey: seçtiğin paletin okunabilir olup olmadığı.
Fotoğraftan renk yakalayanlar
ColorSnap, kameradaki nesneyi Sherwin-Williams kataloğundaki 1.500'den fazla renkle eşleştiriyor. Ücretsiz, yakaladığı değeri doğrudan kod olarak veriyor. Ama eşleştirme bir boya kataloğuna kilitli olduğu için sonuç gördüğün rengin kendisi değil, katalogdaki en yakın komşusu. Ekran için tasarım yapıyorsan bu fark çoğu zaman umursanmaz. Baskıya gidecek bir işte umursanır.
ColorPal daha basit bir iş yapıyor: hazır paletleri tarıyorsun, beğendiğini alıyorsun. Boş sayfadan başlarken faydalı. Beş dakika sonra herkesin baktığı aynı popüler paletlere yakınsadığını da fark ediyorsun, o yüzden bunu başlangıç noktası saymak lazım, karar değil.
Kod tarafında duran iki araç
HTML Colors, adı üstünde, bir hex referansı. RGB ya da HSL kaydırıcısı yok. "Şu rengin kodu neydi" sorusuna saniyeler içinde cevap veriyor; palet kurmaya kalkarsan yetersiz kalıyor.
SuperDryColor Picker açık kaynak. Demo sürümde temel renk seçme çalışıyor, gerisi kapalı. Açık kaynak olması burada pratik bir karşılık taşıyor: çıktıyı kendi palet formatına çevirmek istiyorsan kodu alıp ekleyebilirsin. Bunu yapmayacaksan elinde kalan, ücretsiz uygulamaların en zayıfı.
Pantone'u telefonda taşımak
Pocket Color Chart, PMS kodlarını cebe sığdırıyor. Matbaayla konuşurken kod hatırlamak için iyi. Fakat ekranda gördüğün Pantone, mürekkebin sRGB'ye çevrilmiş yaklaşımı. Kalibre bir kart değil, hatırlatıcı. Renk onayını telefondan vermek diye bir şey yok, fiziksel swatch'a bakmak gerekiyor (uygulamanın "renk doğruluğu" vurgusunu fazla buluyorum).
HEX, RGB ve HSL aynı rengi üç türlü yazar
Sık tekrarlanan bir yanlış var: RGB'nin HEX'ten daha hassas olduğu söylenir. Değil. #FF0000 ile rgb(255, 0, 0) aynı sRGB değeridir, ikisi de kanal başına 8 bit taşır. Aradaki fark hassasiyet değil, yazım biçimi.
HSL'nin getirdiği de hassasiyet değil, düşünme kolaylığı. Tonu sabit tutup açıklığı oynatarak bir rengin açık ve koyu varyantlarını çıkarmak tek sayıyla oluyor; aynı işi RGB'de yapmak üç kanalı birden kaydırmayı gerektiriyor. Arayüz durumları için (hover, pasif, seçili) palet türetirken bu fark saatler kazandırıyor.
Opaklık için rgba() ve hsla() hâlâ çalışıyor, ama artık dördüncü değeri doğrudan yazabilirsin: rgb(255 0 0 / 50%).
Palet güzel görünüyor, peki okunuyor mu?
Yukarıdaki araçların hiçbiri sana kontrast söylemiyor. Hepsi renk veriyor. Bu ikisi aynı şey değil ve aradaki fark ölçülebilir.
WCAG kontrast oranı iki rengin bağıl parlaklığından hesaplanır: (L1 + 0,05) / (L2 + 0,05). Üst sınır 21:1, yani siyah zemin üstünde beyaz. Normal gövde metni için istenen alt sınır 4,5:1.
Şimdi renk uyumu kurallarına bakalım. Tamamlayıcı renkler tanım gereği renk çemberinde karşı karşıya durur, yani tonda zıttır. Parlaklıkta zıt olacaklarının hiçbir garantisi yoktur. Kırmızı (#FF0000) ile camgöbeği (#00FFFF) ders kitabı tamamlayıcı çifti; kontrast oranları 3,2:1 çıkıyor ve gövde metni eşiğini geçemiyor. Yani kitaptaki kurala harfiyen uyup okunmayan bir arayüz üretmek mümkün.
HSL'in "lightness" değeri de kandırıyor. hsl(60 100% 50%) sarı, hsl(240 100% 50%) mavi, ikisinin de lightness değeri %50. Bağıl parlaklıkları ise 0,93'e karşı 0,07. Aynı sayıyı taşıyan iki renk, kontrast hesabında birbirinin tam zıddı.
Buradan çıkan iş şu: palet uygulaması ilham aracı, doğrulama aracı değil. Yakaladığın kodu metin rengi yapmadan önce bir kontrast denetleyicisinden geçir. Bir de rengi tek başına anlam taşıyıcı yapma. Hata durumunu yalnızca kırmızıyla anlatan bir form, kırmızıyı ayırt edemeyen kullanıcıya hiçbir şey anlatmıyor demektir; yanına ikon ya da metin koy.
Kaynaklar