Web tasarımda renk uyumu, sitedeki renklerin birbirini bozmadan tek bir marka gibi görünmesi ve yazının rahat okunmasıdır. Uyumlu bir site; az sayıda renkle, belirli bir düzenle ve yeterli kontrastla kurulur. Renkler güzel durmakla kalmaz, ziyaretçiye nereye bakacağını da söyler.
Bu yazı, kendi sitesinin renklerini belirleyecek ya da yenileyecek işletme sahibi için hazırlandı. Profesyonel bir web tasarım hizmeti alıyorsanız, aşağıdaki adımları ajansa brifing olarak verebilirsiniz. Yazıdaki örnek işletmeler varsayımsaldır.
Marka renginden web sitesi renk paleti nasıl kurulur?
Palet, markanızın ana rengi etrafında kurulur. En sağlam yol, az sayıda rol belirlemektir: bir ana renk, bir vurgu rengi ve birkaç nötr ton. Her rengin sitede belirli bir işi olur. Bu düzen, sitenin her sayfasında aynı marka hissini verir.
Üç rolü şöyle düşünün:
- Ana renk: Markanızı temsil eder. Logo, başlıklar ve büyük alanlarda görünür.
- Vurgu rengi: Dikkat çekmek istediğiniz şeylerde kullanılır; örneğin ana çağrı düğmesi. Sayfada az yer kaplamalıdır.
- Nötr tonlar: Beyaz, açık gri, koyu gri ve siyaha yakın tonlar. Metin ve arka planın büyük kısmı buradan gelir.
Denizli’de bir mobilya atölyesinin logosunun koyu yeşil olduğunu varsayalım. Koyu yeşil ana renk olur. Vurgu için sıcak bir turuncu seçilebilir. Metin için koyu gri, arka plan için kırık beyaz yeterlidir. Bu üç grup, sitenin neredeyse tamamını karşılar.
Palet kurarken pratik birkaç kural işe yarar:
- Toplam renk sayısını düşük tutun. Çok renk, gürültü yaratır.
- Aynı rengi aynı iş için kullanın. Düğme her sayfada aynı renkteyse ziyaretçi onu tanır.
- Ana rengin açık ve koyu tonlarını türetin; yeni, ilgisiz bir renk eklemeyin.
- Renk kodlarını bir yere yazın ve tasarımcıyla, yazılımcıyla paylaşın.
Genel tasarım mantığı için web sitesi arayüz tasarımı yazısına, iyi bir sitenin temel özellikleri için web tasarım nedir yazısına bakabilirsiniz. Bu yazıda yalnızca renk konusuna odaklanıyoruz.
Kontrast ve okunabilirlik nasıl sağlanır?
Kontrast, yazı rengi ile arka plan rengi arasındaki açıklık farkıdır. Yeterli kontrast yoksa metin, özellikle telefonda ve güneş altında okunmaz. W3C’nin erişilebilirlik ölçütü olan WCAG, normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı ister.
Bu oranlar WCAG’ın asgari kontrast sayfasında tanımlıdır. Aynı sayfa, büyük metni de belirtiyor: kalın değilse 18 punto, kalınsa 14 punto ve üstü. Yani başlıklarda biraz daha düşük kontrast kabul edilir, gövde metninde ise 4,5:1 şartı aranır.
Oranı elle hesaplamanıza gerek yok. Renk kodlarını girince oranı gösteren ücretsiz kontrast denetleyicileri vardır. Kullanım şekli basittir: yazı rengini ve arka plan rengini girersiniz, araç oranı gösterir ve hedefi karşılayıp karşılamadığını söyler.
Kontrastta sık görülen hatalar:
- Açık gri yazıyı beyaz zemine koymak. Şık görünür ama okunmaz.
- Fotoğraf üzerine doğrudan beyaz yazı yazmak. Fotoğrafın açık bölgeleri yazıyı yutar. Fotoğrafın üstüne yarı saydam koyu bir katman koymak çözüm olabilir.
- Vurgu rengini hem düğmede hem metinde karışık kullanmak.
- Pasif görünen ama aslında tıklanabilir öğeleri çok silik yapmak.
Kontrast yalnızca yazıya değil, düğme kenarlığı ve form alanı gibi arayüz parçalarına da uygulanır. W3C, bu tür görsel ipuçları için de arka plana karşı en az 3:1 oran önerir. Ayrıntıyı yazı dışı kontrast sayfasında bulabilirsiniz.
Düğme ve bağlantı renkleri nasıl seçilmeli?
Düğme ve bağlantı renkleri, ziyaretçiye “buraya dokunabilirsiniz” diyen işaretlerdir. Ana çağrı düğmesi sayfadaki en belirgin renkte, bağlantılar ise metinden ayırt edilebilir olmalıdır. Aynı işi yapan öğeler her sayfada aynı renkte durmalıdır.
Bazı pratik kurallar:
- Ana düğme: Vurgu renginde olsun. Sayfada bir tane belirgin ana düğme yeterlidir.
- İkincil düğme: Daha sade, örneğin çerçeveli ve sade renkli olsun. Böylece ana düğmeyle yarışmaz.
- Bağlantılar: Metnin içinde yalnızca renkle değil, alt çizgiyle de ayrılabilir. Renkle birlikte bir ikinci işaret kullanmak daha güvenlidir.
- Üzerine gelme ve odak durumları: Düğmenin üzerine gelindiğinde ya da klavyeyle odaklanıldığında görünüm değişsin. Bu, kullanıcıya geri bildirim verir.
Bir örnek: Varsayımsal bir muhasebe bürosunun sitesinde “Teklif isteyin” düğmesi turuncu, “Hizmetleri gör” bağlantısı ise koyu mavi çerçeveli olabilir. İki öğe aynı sayfada ayrı roller üstlenir ve birbirini gölgelemez.
Düğme metninin kontrastını da kontrol edin. Turuncu zemin üzerine beyaz yazı güzel görünebilir ama oran yetersiz kalabilir. Renk seçtikten sonra yazı ve zemin oranını mutlaka ölçün.
Koyu tema ve açık tema renk uyumunu nasıl etkiler?
Koyu tema, açık renkli yazıyı koyu zeminde gösteren görünümdür. Bazı kullanıcılar telefonlarında bu görünümü seçer. Siteniz iki temayı da destekleyecekse, paleti ikisi için de ayrıca planlamanız gerekir; açık temanın renklerini tersine çevirmek çoğu zaman yetmez.
Dikkat edilecek noktalar:
- Koyu temada saf beyaz yazı ve saf siyah zemin arasındaki aşırı karşıtlık gözü yorabilir; hafifçe yumuşatılmış tonlar daha rahat olur.
- Vurgu rengi koyu zeminde farklı görünür. Açık temada iyi olan bir ton, koyuda fazla parlak ya da fazla soluk kalabilir.
- Her iki temada da kontrast oranları ayrı ayrı ölçülmelidir.
- Logonuzun iki zeminde de net göründüğünü kontrol edin.
Tarayıcıların kullanıcı tercihini nasıl okuduğunu web.dev’in koyu tema yazısında görebilirsiniz. Teknik uygulamayı yazılımcınızla konuşun. Her site için koyu tema şart değildir; yapacaksanız iyi yapın, yapmayacaksanız açık temada kontrastı sağlam kurun.
Renk körlüğü olan ziyaretçiler için ne yapılmalı?
Renk körlüğü olan kullanıcılar bazı renkleri ayırt edemeyebilir. Bu yüzden önemli bilgiyi yalnızca renkle iletmemek gerekir. Kırmızı hata, yeşil başarı demek yetmez; yanına metin, simge ya da farklı bir işaret de konmalıdır.
W3C’nin renk kullanımı ölçütü bunu şöyle tanımlar: Renk, bilgiyi iletmenin tek görsel yolu olmamalıdır. Pratikte şunları yapabilirsiniz:
- Form hatasında yalnızca alanı kırmızıya boyamayın; “Telefon numarası eksik” gibi bir mesaj yazın.
- Grafik ve tablolarda renk yanında desen, etiket ya da ikon kullanın.
- “Yeşil düğmeye basın” gibi talimatlardan kaçının; düğmenin adını yazın.
- Metin içindeki bağlantıları yalnızca renkle değil, çizgiyle de belirtin.
Bu önlemler yalnızca renk körlüğü için değil, güneşli ortamda telefon kullanan herkes için de faydalıdır. Erişilebilirlik, sitenizi daha geniş bir kitle için kullanılabilir yapar. Renk körlüğü için bir simülasyon aracıyla sitenizin ekran görüntüsüne bakmak da faydalıdır; renkleri ayırt edemeyen biri sayfayı nasıl görüyor, bunu hızlıca anlarsınız. Özellikle grafik, durum etiketi ve form hatalarında bu denemeyi yapın.
Renklerin “psikolojisi” konusunda neye dikkat edilmeli?
Renklerin insanlar üzerinde belirli bir davranış yarattığı iddiaları sık duyulur: “Kırmızı satın aldırır”, “mavi güven verir” gibi. Bu cümleleri kesin kural gibi yazmıyoruz; çünkü anlamlar kültüre, sektöre ve bağlama göre değişir. Renk seçerken kesin hükümler yerine kendi markanızı ve okunabilirliği temel alın.
Daha güvenli yaklaşım şudur:
- Markanızın zaten sahip olduğu rengi koruyun. Tanınırlık, tek bir rengin etkisinden daha değerlidir.
- Sektörünüzdeki alışkanlıklara bakın; ama kopyalamayın.
- Düğme rengi gibi ölçülebilir kararlar için kendi sitenizde deneme yapın. Hangi rengin işe yaradığını sizin ziyaretçileriniz gösterir.
- Renk kararını “güzel durması” kadar “okunması” ve “tutarlı olması” üzerinden verin.
Renk kararlarını bir paket olarak düşünmek için tasarım sürecini de bilmekte fayda var. Sitenizin ne kadar kapsamlı olacağı fiyatı etkiler; bu konuda web tasarım fiyatlarının neye göre belirlendiği yazımıza bakabilirsiniz. Son olarak, paleti bir kez kurduktan sonra değiştirmeyin; yeni sayfa eklerken de aynı renk kodlarını kullanın. Renk uyumu, bir kerelik karar değil, siteyi büyütürken korunan bir kuraldır. Renk ve tasarım yönünü birlikte konuşmak isterseniz iletişim sayfamızdan bize ulaşın.
Sık sorulan sorular
Bir web sitesinde kaç renk kullanılmalı?
Kesin bir sayı yoktur. Genel yaklaşım, bir ana renk, bir vurgu rengi ve birkaç nötr tondur. Çoğu işletme sitesi bu düzenle sade ve tutarlı görünür. Daha fazla renk gerekiyorsa mevcut renklerin açık ve koyu tonlarını türetin.
Logo rengi sitenin ana rengi olmak zorunda mı?
Zorunlu değildir, ama tutarlılık açısından önerilir. Logo ve site aynı renk ailesinde olursa marka daha kolay tanınır. Logonuzun rengi okunabilirlik açısından uygun değilse, onu vurgu olarak kullanıp metni nötr tonlarla kurabilirsiniz.
Kontrast oranını nasıl kontrol ederim?
Yazı ve arka plan renk kodlarını girdiğiniz bir kontrast denetleyici kullanın. Normal metin için hedef en az 4,5:1, büyük metin için 3:1’dir. Bu ölçütler, yazıda daha önce bağlantısını verdiğimiz W3C WCAG sayfasında yazılıdır.
Siteme koyu tema eklemek zorunlu mu?
Hayır. Koyu tema bir kolaylık seçeneğidir, zorunluluk değildir. Önce açık temada kontrastı ve okunabilirliği iyi kurun. Koyu tema isterseniz paleti ayrıca planlayın ve iki temayı da ayrı ayrı test edin.
Renk uyumu sitenin Google’da çıkmasını etkiler mi?
Renk uyumu doğrudan bir sıralama aracı olarak sunulmaz. Dolaylı etkisi vardır: okunaklı, düzenli bir site ziyaretçiyi sayfada tutmaya yardım eder. Sıralama için içerik, hız ve teknik yapı daha belirleyicidir. Bu konuda sitem Google’da neden çıkmıyor yazısı yol gösterir.