Web Tasarımda Renk Seçimi: Kontrast Aslında Nerede Ölçülür

Renk seçimi, web tasarımın en çok konuşulan ama en az ölçülen kararı. Palet tartışmaları neredeyse tamamen estetik üzerinden yürür, oysa bir rengin sitede işe yarayıp yaramadığını belirleyen asıl şey çok daha sıkıcı: metnin arka planından yeterince ayrışıp ayrışmadığı. Renk çemberinden çıkarılan yaygın tavsiyelerin bir kısmı tam bu noktada sessiz kalıyor, bir kısmı da doğrudan ters çalışıyor.

Renk çemberi kontrastı ile ekran kontrastı aynı şey değil

Hemen her renk rehberinde şu cümle geçer: en yüksek kontrast, renk çemberinde karşılıklı duran renkler arasında oluşur. Bu cümle ton (hue) için doğru, okunabilirlik için değil. Tarayıcının, kontrast denetleyicilerinin ve erişilebilirlik kurallarının baktığı şey tonun ne kadar uzak olduğu değil, iki rengin parlaklık (luminans) farkı.

Sayılara bakınca aradaki fark hemen görünüyor. WCAG, normal boyutlu metin için 4.5:1, büyük başlıklar için 3:1 kontrast oranı ister. Klasik komplementer çiftler bu eşiğin altında kalıyor:

• Kırmızı (#FF0000) üzerine camgöbeği (#00FFFF): 3.19:1. Gövde metni için yetersiz.
• Mavi (#0000FF) üzerine turuncu (#FF8000): 3.41:1. Yine gövde metni için yetersiz.
• Beyaz üzerine saf yeşil (#00FF00): 1.37:1. Pratikte okunmuyor.
• Siyah üzerine beyaz: 21:1. Renk çemberinde birbirine "karşıt" bile değiller.

Yani çemberin tam karşısındaki rengi seçmek size görsel canlılık verir, okunabilirlik vermez. Komplementer çiftleri buton ile arka plan gibi geniş yüzeylerde, dekoratif alanlarda kullanın. Metin ile zemin ilişkisinde ise ton akrabalığına bakmayı bırakıp doğrudan parlaklığı ayırın: koyu bir laciverti açık bir bejle eşleştirmek, mavi ile turuncuyu çarpıştırmaktan çok daha güvenli.

HSL ile çalışmak paleti kurtarıyor

Bir rengin beyazla açılmışına tint, siyahla koyulaştırılmışına shade, griyle karıştırılmışına ton denir. Bu üçü hex kodlarıyla uğraşırken zahmetli, HSL ile ise neredeyse otomatik. Çünkü HSL'de ton, doygunluk ve parlaklık ayrı sayılar olarak duruyor; parlaklığı değiştirdiğinizde rengin kimliği bozulmuyor.

:root { --marka: hsl(210, 80%, 45%); --marka-acik: hsl(210, 80%, 70%); --marka-koyu: hsl(210, 80%, 25%); } 

Aynı işi hex ile yapmaya kalkarsanız her varyasyon için ayrı bir hesap ya da ayrı bir araç gerekir. CSS tarafında hex, isim, rgb ve hsl arasında teknik bir üstünlük yok, hepsi aynı rengi üretir; fark tamamen sizin sonradan o rengi ne kadar kolay türeteceğinizde.

Renklerin anlamı sabit değil, bağlama göre değişiyor

Mavi güven, kırmızı enerji, yeşil doğa. Bu eşleştirmeler tamamen uydurma değil ama sanıldığı kadar evrensel de değil. Finans ve kurumsal sitelerde mavinin baskın olması psikolojik bir yasadan çok sektörel bir alışkanlık: rakipler mavi kullandığı için mavi kullanmayan tuhaf duruyor. Kırmızının "harekete geçirici" sayılması da benzer şekilde, kırmızının uyarı ve indirim bağlamında yıllarca kullanılmış olmasından geliyor.

Pratik sonuç şu: renk psikolojisini palet seçerken başlangıç noktası olarak kullanın, gerekçe olarak değil. Sektörünüzde herkesin mavi kullanması, sizin için mavinin doğru olduğunu göstermez; tam tersine ayrışma fırsatı olabilir. Ama ayrışırken kullanıcının öğrenilmiş beklentilerine çarpmayın. Silme butonunu yeşil yapmak cesur bir tercih değil, hata.

Palet kurmanın üç yolu ve hangisi ne zaman

Monokromatik palet, tek bir tonun tint ve shade varyasyonlarından oluşur. İçerik ağırlıklı, sade sitelerde en güvenli seçenek, çünkü yanlış yapma ihtimaliniz düşük. Sıkıcı görünme ihtimaliniz ise yüksek; bunu tek bir vurgu rengi ekleyerek çözersiniz.

Analog palet, çemberde yan yana duran renkleri kullanır. Sıcak veya soğuk bir atmosfer kurmak istediğinizde iyi çalışıyor. Zayıf tarafı da burada: yan yana renkler benzer parlaklıkta olma eğiliminde, dolayısıyla vurgu yapmak zorlaşıyor.

Komplementer palet en dinamik olanı, ama yukarıdaki sayılar nedeniyle en dikkatli kullanılması gerekeni. İki karşıt rengi eşit oranda kullanmak yerine biri baskın, diğeri sadece vurgu olacak şekilde dağıtın. Kabaca yüzde 60-30-10 dağılımı (ana renk, ikincil renk, vurgu) çoğu durumda işe yarıyor.

RGB ve CMYK: sadece baskıya iş çıkacaksa önemli

RGB ekran içindir ve toplamalı çalışır, CMYK baskı içindir ve çıkarmalı. Ekranda gördüğünüz canlı bir yeşil ya da parlak turuncu, CMYK'ya dönüştürüldüğünde gözle görülür biçimde soluyor, çünkü CMYK'nın renk aralığı daha dar. Sadece web için tasarım yapıyorsanız bu konuyla hiç uğraşmanıza gerek yok. Aynı palet kartvizite, brosüre ya da tabelaya gidecekse, paleti seçerken CMYK karşılıklarına da bakın; sonradan düzeltmek yerine baştan iki ortamda da ayakta duran renkleri seçmek çok daha kolay.

Paleti seçtikten sonra yapılacak tek zorunlu iş

Palet üretmek için çok sayıda araç var, hepsi benzer işi yapıyor:

• Adobe Color, çember üzerinden monokromatik, analog ve komplementer paletleri tek ekranda üretir.
• Paletton, ürettiği paleti örnek bir sayfa düzeni üzerinde önizlemesiyle hâlâ faydalı.
• WebAIM Contrast Checker, iki rengin oranını verir ve AA/AAA eşiklerini geçip geçmediğini söyler.

Bu üçüncüsü isteğe bağlı değil. Palet hazır olduğunda metin ve zemin olarak kullanacağınız her çifti tek tek oradan geçirin. Genellikle iki üç çift eşiğin hemen altında çıkar ve parlaklığı birkaç puan oynatarak düzelir. Gri üzerine gri yazılan ikincil metinler, açık renkli butonların üzerindeki beyaz yazılar ve pastel zemine yerleştirilmiş form etiketleri en sık çakılan yerler.

Kontrastı yükseltmek tasarımı çirkinleştirmek anlamına gelmiyor. Genellikle sadece daha az kişinin sitede zorlanması anlamına geliyor, ki bu da düşük görme keskinliği olan kullanıcılarla sınırlı bir kazanç değil: güneş altında telefonuna bakan herkes o gruba giriyor.