UI Renk Paleti Nasıl Kurulur: Ton Uyumu, Kontrast ve 60-30-10
Renk paleti kurmak, hoşa giden birkaç rengi yan yana dizmek değil. Arayüzde renk aynı anda iki iş yapıyor: markayı hatırlatmak ve kullanıcıya nereye basacağını göstermek. Üçüncü bir görev daha var, metni okunur tutmak, ve genelde ilk ikisi uğruna feda edilen o oluyor. Renk çemberinden başlayıp kontrast hesabına kadar sırayla gidelim.
Palet neyden oluşur
Bir rengi üç sayıyla tarif edebilirsin. Ton (hue) rengin çember üzerindeki açısıdır: kırmızı 0°, yeşil 120°, mavi 240°. Doygunluk (saturation) rengin ne kadar griye kaçtığını, parlaklık (lightness) ne kadar açık ya da koyu olduğunu söyler. CSS'te hsl(210 90% 45%) yazdığında bu üç sayıyı doğrudan veriyorsun; hex yazdığında aynı bilgiyi kırmızı, yeşil ve mavi kanallarına dağılmış halde veriyorsun. Varyant üretmek gerektiğinde HSL'nin işi kolaylaştırmasının nedeni bu: tek sayıyı, parlaklığı oynatarak aynı tonun açık ve koyu sürümlerini çıkarabiliyorsun.
Palet dediğimiz şey bu üç eksende seçilmiş küçük bir set: bir ana renk, bir ya da iki destek, bir aksan, artı nötr griler. Beşin üstüne çıkınca sistem tutarlılığını kaybediyor, çünkü eklenen her renk "bu ne zaman kullanılır" sorusuna bir cevap daha borçlanıyor.
Uyum kuralları tonu düzenler, kontrastı değil
Monokromatik palet tek tonu farklı doygunluk ve parlaklıklarda kullanır. Analog palet çemberde komşu tonları, tamamlayıcı palet karşılıklı iki tonu, triadik palet 120° aralıklı üçlüyü alır. Bu kalıplar işe yarar ve rengin birlikte hoş görünmesini sağlar, ama hepsi tek bir eksende, ton ekseninde çalışır.
Okunabilirlik o eksende belirlenmiyor. En net örnek saf kırmızı ile saf yeşil: çemberde birbirinden neredeyse en uzak iki ton, yani sezgiye göre kusursuz bir karşıtlık. Bağıl parlaklıkları 0,2126 ve 0,7152. Kontrast oranı (0,7152 + 0,05) / (0,2126 + 0,05) işleminden 2,9:1 çıkıyor, metin için gereken 4,5:1'in epey altında. Ton farkı azami, okunabilirlik sınıfta kalıyor.
Pratik karşılığı şu: paleti tondan kur, sonra parlaklık değerlerini ayrı bir tur gözden geçir. Analog bir palette bütün renkleri aynı parlaklıkta bıraktıysan, aralarındaki her kombinasyon 1:1'e yaklaşır ve palet ekranda tek bir lekeye dönüşür.
Kontrast eşikleri: 4,5:1 her yerde geçerli değil
WCAG'in AA seviyesi tek bir sayı dayatmıyor. Normal boyuttaki metin için 4,5:1 gerekiyor. Büyük metin için (kabaca 24px, kalınsa 19px ve üzeri) 3:1 yetiyor. Buton kenarı, ikon, form alanı çerçevesi gibi arayüz bileşenleri ve anlam taşıyan grafikler için de eşik 3:1. "Ana renkle arka plan arasında en az 4,5:1 olsun" cümlesi bu yüzden fazla kaba kaçıyor: ana rengin üstünde metin varsa doğru, renk yalnızca bir dolgu ya da ayraç çizgisiyse gereğinden sıkı.
Ölçme sırası işi kısaltıyor. Önce metin ve arka plan çiftini kilitle, hareket alanının en dar olduğu yer orası. Aksanı en sona bırak; görevi dikkat çekmekse 3:1 eşiğini tutturması çoğu zaman yeterli.
Marka renginin hex kodunu doğrudan gövde metnine vermem. Logoda çalışan doygunluktaki bir renk 14-16px'lik bir paragrafta ya fazla açık ya da titrek kalıyor. Aynı tonun parlaklığını düşürüp doygunluğunu bir miktar kırmak, metin için ayrı ve daha sağlam bir varyant veriyor.
60-30-10 bir alan kuralıdır
Sık sık renk sayısı kuralı sanılıyor, oysa oran kapladığı alanla ilgili: ekranın kabaca %60'ı ana renk ve arka plan, %30'u destek, %10'u aksan. İç mimariden ödünç alınmış bir başparmak kuralı, ölçülmüş bir yasa değil. İşe yaramasının nedeni aksanı kıt tutmaya zorlaması. Bir sayfada üç tane "birincil" düğme varsa hiçbiri birincil değildir.
Oranı tutturmanın en kolay yolu %60'lık kısmı neredeyse renksiz bırakmak: nötr griler, tonla hafifçe ısıtılmış beyazlar. Saf siyah ile saf beyaz ikilisinden kaçınma tavsiyesi de buraya bağlanıyor, çünkü o çift 21:1 veriyor ve uzun metinde göz yoruyor.
Renk psikolojisine ne kadar güvenmeli
Kırmızının uyarı, mavinin güven çağrıştırdığı yönündeki eşlemeler kültüre ve bağlama göre kayıyor. Aynı kırmızı bir borsa arayüzünde düşüşü gösterirken başka bir pazarda yükselişi gösterebiliyor. Buradan çıkacak kullanışlı kural şu: rengin anlamını kullanıcıya öğretme işini rengin kendisine yıkma. Anlam, o rengin arayüzde her seferinde aynı işi yapmasından doğuyor. Silme eylemi her yerde aynı kırmızıysa kullanıcı üçüncü karşılaşmada öğrenir, kırmızının evrensel çağrışımından değil.
Bir de renk körlüğü var. Kırmızı ile yeşili ayırt etmekte zorlanan kullanıcılar için, durumu yalnızca renkle bildiren her arayüz sessizce bozuluyor: uyarı ile onay aynı gri tonuna düşüyor. Renge bir ikon, bir etiket ya da bir desen eşlik ettiğinde sorun ortadan kalkıyor.
Araçlar ve fotoğraftan palet çıkarmanın sınırı
- Coolors, Paletton, Adobe Color: ton uyumlarını üretir, bir kısmı erişilebilirlik uyarısı da gösterir.
- Color Hunt: hazır palet arşivi, başlangıç noktası ararken.
- Colormind: görsellerden ve film karelerinden renk çıkarır.
- WebAIM Contrast Checker ve tarayıcı geliştirici araçlarındaki renk seçici: oranı doğrudan söyler, tahmine gerek bırakmaz.
Fotoğraftan palet çıkaran araçların hepsi baskın renkleri buluyor, yani görüntüde en çok alan kaplayan kümeleri. Alan çokluğuyla okunabilirlik arasında bir bağ yok. Bir manzara fotoğrafından çıkan beş renk bu yüzden çoğu zaman birbirine yakın parlaklıkta oluyor ve olduğu gibi arayüze taşındığında metin katmanı çöküyor. Bu çıktıları ton önerisi say, parlaklıkları kendin aç ve kapa.
Sırayla kurarsan kısa sürer
Nötr ölçeğini seç, metin ve arka plan çiftini kontrast oranıyla kilitle, ana rengi bu nötrlerin üstüne otur, aksanı en sona bırak. Ton uyumu bu sıranın herhangi bir adımında devreye girebilir. Kontrast giremez, sonradan düzeltilmesi en pahalı olan da odur.
Kaynaklar