Koyu zeminde renk seçimi: fark edilmek ve kaybolmak

Tuvalin zemini #0a0a0f. Neredeyse siyah, hafif mora çalan bir ton. Bu bilgi tek başına sıkıcı görünebilir ama pratik sonucu şu: koyu lacivert bir kurumsal renkle tasarladığın reklam, tuvalde var olmayacak. Alanı kiraladın, ödedin, onaylandı ve kimse nerede bittiğini göremiyor.

Bu yazı, o durumdan kaçınmak için renk kararlarını duyguyla değil sayıyla vermeyi anlatıyor.

Asıl değişken renk değil, kontrast

"Hangi renk daha çok dikkat çeker" yanlış soru. Doğru soru: bu renk zeminden ne kadar ayrışıyor. Ayrışmayı ölçen şey kontrast oranı — iki rengin parlaklıkları arasındaki oran. 1:1 aynı renk demek, 21:1 siyah–beyaz demek.

#0a0a0f zemine karşı birkaç gerçek değer:

#ffffff beyaz — yaklaşık 19,8:1
#ffd700 altın sarısı — yaklaşık 14:1
#00a8ff parlak mavi — yaklaşık 7,6:1
#808080 orta gri — yaklaşık 5:1
#ff0000 saf kırmızı — yaklaşık 4,9:1
#1e3a8a koyu lacivert — yaklaşık 1,9:1
#1a1a24 koyu gri-mor — yaklaşık 1,1:1

Buradaki iki şey çoğu insanı şaşırtır.

Birincisi: saf kırmızı, siyah zeminde göründüğü kadar güçlü değil. Kırmızının parlaklık katkısı düşüktür; gözüne "çığlık atıyor" gibi gelse de ölçülen kontrastı orta grininkiyle hemen hemen aynı. Kırmızıyı koyu zeminde kullanacaksan ya turuncuya kaydır ya da yanına beyaz bir öğe koy.

İkincisi: kurumsal lacivert bir felaket. 1,9:1, pratikte "yok" demek. Markanın birincil rengi koyu bir tonsa, tuvalde onu zemin olarak değil, açık bir zeminin üstünde şekil olarak kullanmak zorundasın.

Kaba eşikler, genel erişilebilirlik pratiğinden: küçük yazı için 4,5:1, ikonlar ve kalın grafik öğeler için 3:1 alt sınır kabul edilir. Tuvalde her şey çok küçük olduğundan bu sayıları taban değil, hedefin altı olarak düşün. Metin için 7:1 ve üstünü hedefle.

Açık zemin plakası ne zaman kazanır

İki temel kurgu var:

Koyu zemin üstünde parlak şekil. Reklamının arka planı tuvalin zeminiyle aynı ya da ona yakın kalır, sadece logon ve yazın parlar. Avantajı: tuvale doğal oturur, çirkin durmaz. Dezavantajı: alanının sınırı görünmez, komşu reklamla senin reklamının nerede ayrıldığı belli olmaz.

Açık ya da doygun zemin plakası. Kiraladığın dikdörtgenin tamamını dolduran bir renk koyarsın, içine markanı yerleştirirsin. Avantajı: alan tek bir nesne olarak okunur, kenarları nettir, göz onu bir birim olarak yakalar. Dezavantajı: kaba kullanılırsa tuvalde sırıtan bir yama gibi durur.

Karar kuralı basit: alanın küçükse plaka kullan. 10 × 10 (100 pixel, haftada 100 dolar) gibi bir alanda "sınırsız" bir kompozisyon algılanmaz, sadece dağınık birkaç parlak pixel olarak görünür. Alanın büyükse — mesela 40 × 30, yani 1.200 pixel, haftada 1.200 dolar — kompozisyonun kendisi sınırı taşıyabilir, plaka şart değil.

Plaka rengini seçerken zemine karşı en az 4:1 hedefle. #f5f5f4 kırık beyaz, #ffd700 sarı, #00a8ff mavi gibi tonlar rahat geçer. #2d2d3a gibi bir ton geçmez.

Çerçeve: alanın bir nesne olduğunu söylemek

Plaka kullanmıyorsan bile, tanımlı bir kenar alanının okunmasını ciddi biçimde kolaylaştırır. 1 pixellik açık renkli bir çerçeve, kiraladığın dikdörtgeni tuvalde "bir şey" haline getirir.

Ama maliyeti var, ve pixel cinsinden ödüyorsun:

40 × 30'luk bir alanda 1 pixellik çerçeve 136 pixel harcar. Toplam 1.200 pixelin yaklaşık %11'i.
10 × 10'luk bir blokta aynı çerçeve 36 pixel harcar. Alanın %36'sı.

Yani tek blokta tam çerçeve lüks. Onun yerine iki seçenek: ya tüm bloğu tek renk plaka yap (çerçeveye gerek kalmaz, plakanın kendisi sınırdır), ya da sadece iki köşeyi işaretleyen birkaç pixel koy.

İnce bir nokta: çerçeve rengini zeminle aynı tondan seçme. #0a0a0f zemine #1f1f2e çerçeve koyarsan hiçbir şey yapmış olmazsın. Çerçeve ya belirgin olacak ya da hiç olmayacak.

Komşular algılanan rengi değiştirir

Tuvaldeki reklamın tek başına durmuyor. Yanında, altında, üstünde başka kiracıların alanları var ve bu bir renk sorunudur, bir yerleşim sorunu değil.

Pratik sonuçları:

Aynı aile renkler birleşir. Yanındaki alan da sarıysa iki reklam tek bir sarı leke gibi okunur. Tıklamak isteyen kişi hangisinin hangisi olduğunu çıkaramaz.
Parlak komşu seni söndürür. Etrafın çok doygunsa senin orta parlaklıktaki alanın zemine göre değil, komşuya göre değerlendirilir ve sönük kalır. Bu durumda kontrastı daha da yükseltmek yerine ters yöne git: çevre gürültülüyse sade ve boşluklu bir alan öne çıkar.
Boş bölgede tek başınasın. Etrafın koyuysa orta düzey bir parlaklık bile yeter, maksimuma çıkman gerekmez.
Komşuluk değişir. Kiralamalar haftalık; yanındaki alan üç hafta sonra bambaşka bir renge dönebilir. Bu yüzden tasarımını komşuna göre değil, zemine göre kur. Zemin sabit, komşun değil.

Alanını seçerken tuvaldeki mevcut duruma bakmak yine de faydalı — ama tasarımını kalıcı olmayan bir şeye bağlama.

Rengi tek anlam taşıyıcısı yapma

Küçük alanda renk, sandığından daha kaygan bir zemin:

Renk körlüğü yaygın. Kırmızı–yeşil ayrımına dayanan bir mesaj, izleyicilerin belirgin bir kısmı için yok hükmünde.
Ekranlar farklı. Aynı hex, ucuz bir monitörde ve kalibre bir ekranda farklı görünür. Koyu tonlar özellikle kayar.
Tuval tek bir birleşik görüntü olarak sunuluyor ve senin görselin tam ölçüye yeniden kodlanıyor. Birbirine çok yakın iki ton, bu süreçte pratikte ayırt edilemez hale gelebilir.

Buradan çıkan kural: anlamı asla sadece renge yükleme. "Yeşil olan indirimli" gibi bir kurgu çalışmaz. Form, konum, kalınlık ve boşluk da mesajı taşısın. Renk, mesajı desteklesin — tek başına taşımasın.

Aynı mantık marka rengi için de geçerli. Markanı sadece renginden tanıyorlarsa, koyu zeminde o renk bozulduğunda geriye hiçbir şey kalmaz. Formu da tanınır olsun.

Hızlı kontrol listesi

Yüklemeden önce şunları yap:

Tasarımını #0a0a0f dolgulu bir zeminin üstüne koy ve bak. Beyaz arka planda çalıştığını görmek hiçbir şey söylemiyor.
En önemli öğenin zeminle kontrastını hesapla. 3:1'in altındaysa değiştir.
Tasarımı gri tonlamaya çevir. Öğeler hâlâ birbirinden ayrılıyor mu?
Görseli tam ölçüsünde kaydet, %100 yakınlaştırmada aç ve bir kol boyu uzaklaş.
Alanının nerede bittiğini görebiliyor musun? Göremiyorsan plaka ya da çerçeve ekle.

Kısa özet

Zemin #0a0a0f ve değişmiyor. Tasarımını bu sayıya göre kur: koyu marka renkleri zemin olarak değil şekil olarak kullanılır, kontrastı tahmin etmek yerine ölç, küçük alanlarda plaka çerçeveden ucuzdur, ve hiçbir mesajı tek başına renge yükleme. Emin olmadığın bir renk kararını bir haftalık tek blokla — 100 dolar — gerçek tuvalde sınayabilirsin.

Alanını seç