Web Tasarımında Renk Sembolizmi ve Kontrastın Sınırı
Renk, tasarımın en çok konuşulan en az ölçülen tarafı. Kırmızının aciliyet, mavinin güven çağrıştırması doğru; ama bu çağrışımlar kültüre göre kayar ve hiçbiri ekrandaki yazının okunup okunmadığını belirlemez. Sembolizm paleti daraltmaya yarar, kararı kontrast oranı verir.
Sembolizm nereye kadar yol gösterir
Bir rengin anlamı üç katmandan gelir: biyolojik tepki, kültürel kod, kişisel deneyim. Birincisi görece sabittir, diğer ikisi değil. Japonya'da beyaz yas rengiyken Batı'da saflığı temsil eder, yani aynı palet iki pazarda iki farklı cümle kurar. Birden fazla pazara açılan bir üründe renk kararını vermeden önce hedef pazarda o rengin nereye oturduğuna bakmak birkaç saatlik iş; kurumsal kimliği sonradan değiştirmek aylarca sürer.
Kültürlerarası çalışan projelerde bu iş bilinçli yapılıyor. The Global Goals inisiyatifinin 17 hedefi için seçilen renkler, tek bir kültürün kodlarına değil, mümkün olduğunca çakışmayan ortak bir okumaya göre belirlenmiş.
Renklerin taşıdığı yaygın çağrışımlar
| Renk | Yaygın çağrışım | Tipik kullanım |
|---|---|---|
| Kırmızı | Batı'da tutku ve tehlike, Doğu'da şans ve mutluluk | Eylem butonu, indirim ve aciliyet vurgusu |
| Turuncu | Canlılık, yaratıcılık | Genç kitleye seslenen markalar; lüks segmentte zayıf kalır |
| Sarı | Umut, neşe, dikkat | Uyarı ve vurgu; soluk tonları ucuz görünür |
| Yeşil | Doğa, sağlık, büyüme | Onay durumları, sağlık ve finans |
| Mavi | Güven, sadakat, profesyonellik | Kurumsal arayüzler, bankacılık, sağlık |
| Mor | Asalet, yaratıcılık, gizem | Butik ürünler, kozmetik |
| Beyaz | Sadelik, temizlik | Boşluk yönetimi, minimal arayüz |
| Siyah | Ciddiyet, güç | Kontrast, premium algı |
Tablo bir başlangıç noktası, kural değil. Aynı kırmızı bir bankacılık uygulamasında hata, bir e-ticaret sepetinde satın alma anlamına gelir; rengi anlamlandıran şey, kullanıcının o ekranda ne beklediğidir.
Kırmızı butonun sayısal sınırı
Yaygın tavsiye şudur: dikkat çeksin diye ana eylem butonunu kırmızı yap. Aynı yazıların çoğu birkaç paragraf sonra erişilebilirliğe dikkat edilmesini de söyler. İkisi her tonda bir arada yürümez ve bunun sebebi zevk değil, aritmetik.
Saf kırmızının (#FF0000) üzerine gelen beyaz metnin kontrast oranı 4:1. WCAG'ın normal boyutlu metin için istediği eşik 4.5:1. Yani sektörün en klasik buton kombinasyonu standardı kıl payı kaçırır. Aynı zeminde siyah metin 5.25:1 verir ve eşiği geçer, ama çoğu marka kırmızı butonda siyah yazı istemez. Ucuz çözüm rengi bir ton koyulaştırmak: #D32F2F üzerinde beyaz metin 4.98:1'e çıkar, marka kırmızıdan vazgeçmez, buton erişilebilir olur.
Paleti onaylamadan önce oranı hesapla. Tarayıcının geliştirici araçlarındaki renk seçici oranı zaten gösteriyor, ayrı bir eklenti kurmaya gerek yok. Göz bu işte kötü bir hakem: koyu zeminde parlak görünen bir yeşil, ölçünce 3'ün altında çıkabiliyor.
Paleti üç rolle kur
Tek rengi tüm arayüze yaymak yerine ana, yardımcı ve vurgu diye üç rol tanımla. Vurgu rengi az kullanıldığı için işe yarar. Her yerde kırmızı varsa hiçbir yer acil değildir.
CSS tarafında rengi hex (#D32F2F), rgb(), hsl() ya da alfa kanallı rgba() ve hsla() ile yazabilirsin. Bir skala kurarken hsl() pratikte daha rahat çalışır: tonu ve doygunluğu sabit tutup yalnızca açıklık değerini değiştirerek aynı rengin okunabilir bir merdivenini üretirsin. Şeffaflıkla katman kurarken de gerçek kontrastın arkadaki zemine göre değiştiğini unutma; rgba(0,0,0,.5) beyaz zeminde başka, fotoğraf üstünde başka sonuç verir.
Test, sonra tercih
Renk seçimi sezgiyle başlar, ölçümle biter. Sembolik anlam hangi ailenin doğru olduğunu söyler, kontrast hangi tonun kullanılabilir olduğunu. Sıralamayı ters kurarsan erişilebilir ama markaya benzemeyen ya da markaya uygun ama okunmayan bir arayüz elde edersin, ikisi de sonradan pahalı düzeltmedir.
Kaynaklar