Renk kontrastı, metin ile arka plan arasındaki parlaklık farkıdır ve WCAG standardı bunu sayıyla ölçer: normal metin için en az 4,5’e 1, büyük başlık için 3’e 1. Marka renginiz bu eşiği geçmiyorsa ziyaretçinin bir kısmı yazıyı okuyamaz. Kimlik tasarımı sırasında kontrast ölçülürse marka rengi de korunur, okunabilirlik de sağlanır.
Sunumda güzel, sitede okunmaz
Renk paleti tasarım sunumunda büyük bir kartın üzerinde değerlendirilir. Gerçek test ise sitede, beyaz bir zemindeki gri bir paragrafta ya da düğme üzerindeki küçük bir yazıda yapılır. Pastel mavi, açık sarı ya da soluk turuncu gibi tonlar büyük alanda hoş durur, küçük metin olarak kullanıldığında kaybolur.
Etkilenen kişi sayısı da düşündüğünüzden fazla. Görme keskinliği düşük olan yaşlı ziyaretçiler, güneş altında telefona bakan herkes, ekran parlaklığı düşük kullananlar, renk körlüğü olanlar. Bunların hepsi aynı ziyaretçi kitlesinin parçası.
WCAG oranı nasıl hesaplanır?
Oranı elle hesaplamanız gerekmez. Ücretsiz kontrast kontrol araçları iki renk kodunu girdiğinizde 1’e 1 ile 21’e 1 arasında bir sayı verir. Siyah beyaz üzerinde 21’e 1 çıkar. Metin için 4,5’e 1 altına düşmeyin. 24 piksel ve üzeri ya da 19 piksel kalın metin büyük sayılır ve 3’e 1 yeter. Düğme kenarlıkları ve form alanı çizgileri gibi arayüz öğeleri de 3’e 1 eşiğine tabidir.
Araçla ölçerken sadece ana metni değil, bağlantı rengini, gri yardımcı metni, form ipucunu ve ürün kartlarındaki fiyat yazısını da deneyin. En sık kaçan yer, “ikincil” diye soluk bırakılan yardımcı metinlerdir.
Marka rengini metin olarak kullanma riski
Açık tonlu bir marka rengi beyaz zeminde metin olarak okunmuyorsa iki seçenek var: rengi koyulaştırmak ya da metin için ayrı bir türev tanımlamak. İkincisi tercih edilir, çünkü marka rengi bozulmaz. Pastel turuncu logo ve görsellerde kalır; gövde metni ve bağlantılar için aynı turuncunun koyu kahveye yakın bir tonu tanımlanır.
İyi bir kimlik kılavuzunda her ana renk için iki sürüm bulunur: “marka rengi” ve “metin rengi”. Renk paleti kurulurken bu ayrımı baştan yapmak, sonradan site düzenlemesini kolaylaştırır; palet mantığı için renk paleti yazımıza bakabilirsiniz.
Düğmeler ve form alanları
Sitedeki “Teklif Alın” ya da “Randevu Oluştur” düğmeleri dönüşümün gerçekleştiği yerdir. Açık sarı zemin üzerine beyaz yazı yazılmış bir düğme göze hoş gelir ama tıklanabilir olduğu anlaşılmaz. Düğme zemini ile yazı arasında 4,5’e 1, düğme ile sayfa zemini arasında 3’e 1 olmalı.
Hata mesajlarında da dikkat: kırmızı yazıyla tek başına hata göstermek renk körü ziyaretçiye ulaşmaz. Yanına bir ikon ve “Telefon numarası eksik” gibi açık bir metin koyun. Form alanı etiketleri placeholder içinde kaybolan metin olmasın; alanın üstünde sabit dursun.
Renk körlüğü: renk tek başına bilgi taşımasın
Erkeklerin yaklaşık yirmide birinde kırmızı-yeşil ayrımı zor olabilir. “Yeşil açık, kırmızı kapalı” gibi bir gösterim bu kişilere hiçbir şey söylemez. Çözüm ikinci bir işaret: ikon, çizgi biçimi ya da yazı. Grafik ve tablolarda da renk dışında desen ya da etiket kullanın. Tarayıcıların geliştirici araçlarında renk körlüğü simülasyonu bulunuyor; sayfayı bir kez bu modlarda taramak beş dakikanızı alır.
Test aracını sürece yerleştirin
Kontrast ölçümü kimlik kılavuzunun bir parçası olsun. Palet çıkarken tüm metin-zemin ikilileri bir tabloda gösterilsin: hangi renk hangi zeminde kullanılabilir, oranı kaç. Yeni bir renk eklenirse tablo güncellenir. Web geliştirici bu tabloya bakarak çalışır ve tasarımcıya her seferinde sormak zorunda kalmaz.
Canlı sitede de düzenli tarama yapılabilir. Tarayıcı eklentileri ve otomatik denetim araçları sayfayı kontrast açısından tarar. Bu taramayı web tasarım hizmetimizde teslimden önce standart adım olarak yapıyoruz. Teslim sonrası denetim için tutarlılık kontrol listemiz de uygun.
Küçük bir örnek: lavanta rengi bir danışmanlık sitesi
Bir psikolojik danışmanlık kliniğinin markası lavanta ve açık gri üzerine kurulu. Logoda çok şık duruyor. Sitede ise gövde metni açık gri, zemin beyaz; oran 2’ye 1 civarında çıkıyor. Ziyaretçiler çalışma saatlerini okumakta zorlanıyor, telefon numarası ise fark edilmiyor. Çözüm renkleri çöpe atmak değil: gövde metni koyu mora yakın bir tona taşınıyor, lavanta yalnızca kart arka planlarında ve vurgu çizgilerinde kalıyor. Markanın görünüşü değişmiyor, ama sayfa ilk kez rahat okunuyor.
Hukuki ve ticari boyut
Erişilebilirlik bazı ülkelerde yasal zorunluluk. Türkiye’de kamu siteleri için ayrı düzenlemeler var; özel sektör için ise zorunluluk dar kapsamda. Ama hukuku bir yana bırakın: okunamayan bir düğme satış kaybettirir. Erişilebilir tasarım, aynı zamanda iyi kullanıcı deneyimidir ve arama motorlarının da sevdiği temiz bir yapı oluşturur.
Erişilebilir bir sitenin maliyeti de çoğunlukla ayrı bir kalem olarak çıkmaz; baştan doğru tasarlandığında ekstra emek gerektirmez. Paket kapsamları fiyatlar sayfasında yazılı.
Uygulama için kontrol
Siteyi açıp şunları kontrol edin: gövde metni 4,5’e 1’i geçiyor mu? Yardımcı gri metinler? Düğmeler? Bağlantılar etraflarındaki metinden ayırt ediliyor mu? Formlardaki hata mesajı renk dışında bir işaret taşıyor mu? Hepsine evet diyorsanız sağlam durumdasınız.
Siteniz ya da kimliğiniz için kontrast denetimi yaptırmak isterseniz iletişim sayfamızdan bize yazın veya 0540 022 64 22 numarasından arayın.