Renk kontrastı (color contrast) SEO (arama motoru optimizasyonu) ve kullanıcı deneyimi için tartışma konusu oldu. Yapılan testlere göre renk seçimi e-ticaret sitelerinde satın almayı etkileyen bir faktör. Fakat SEO için aynı seviyede bir durum mevcut değil.
Renk kontrastı, site rengi, renk palet seçimi SEO için ‘şuan’ bir değeri yok. Bir sıralama avantajı da sağlamıyor.
Neden şuan değil. Çünkü Google Arama Şefi John Mueller, erişebilirlik adı altında açıklama yaptı. Açıklamada, “Şuan da bunlar avantaj değil. Lakin ileride neler getirir bilmiyoruz” tarzı bir açıklama yaptı (videosu aşağıda).
Eğer şablonlarımı okuyorsanız rakip içerik tespiti şablonumda WCAG kontrolünde nelere dikkat edeceğimizi yazmıştım. Rakip incelenmesinde değerlendirilmelidir diye de eklemiştim.
Renk kontrast oranı SEO durumundan çok kullanıcı davranış ilişkisine dayanıyor. Çünkü, bağlantı renginin soluk olması kullanıcıyı o bağlantıya tıklatacak bir özellik olarak görülmüyor. Bu da ticaretin gelişmesini engellerken satış ve ciro düşüklüğüne sebep oluyor. Her şeyin temelinde mükemmel bir site deneyimi var. Eğer iyi bir site deneyimi inşa edersek SEO alanında da başarılı oluruz. Satış ve ciro alanında da başarı kaçınılmaz olur.
Web Site Renk Kontrastı Nasıl Kontrol Edilir?
Bir web sitesinin renk kontrastını kontrol etmek için manuel ya da otomatik işlev tercih edilir. Manuel olarak kontrol etmek oldukça avantajlı. Çünkü tam bir tespit yapabiliyorsunuz. Otomatik olarak göstereceğim noktada renk paletini girmeniz gerekiyor. Sitede birden fazla renk kullanıldığından biraz can sıkabiliyor.
Manuel Olarak Renk Kontrastı Bulmak
İlk olarak manuel olarak renk kontrastının nasıl kontrol edileceğini gösteriyorum:
- Web sitenizde bir yazıya sağ tıklayın ve incele diyin.
- En sağda üç çizgiye tıklıyoruz. Diğer araçlar > CSS’ye Genel Bakış bölümüne tıklıyoruz.
Açılan bu bölümde ilk olarak ‘Yakalamaya Genel Bakış’ butonu çıkıyor ona tıklıyoruz.
Açılan bu bölümde renkler diye bir panel var. Panelde Arka plan renklerini, metin renklerini ve kontrast sorunlarını görebiliyoruz. Eğer ideal bir sevideyse AA yeşil tik alırken mükemmellik varsa AAA yeşil tik alıyor.
Otomatik Olarak Renk Uyumu Bulmak
- Color Contrast Checker adresine gidin.
Buradan sonra bir yönlendirme yapmama gerek yok. Oldukça açık: Text color bölümünden yazı tipi renginizi seçeceksiniz.
Bu site, Web Content Accessibility Guidelines (Web İçeriği Erişilebilirlik Yönergeleri) tarafından besleniyor. Web İçeriği Erişilebilirlik Yönergeleri’ne (WCAG) uygun olarak tasarlanmış.
Eğer yazı tipi ve arka plan renginiz kötüyse kırmızı renk ile uyarılıyorsunuz. Bunun nedeni ise; yazı tipi renginin ekran koruyucuları tarafından okunmaması.
Contrast oranının düşük olduğunu resimde görebiliyorsunuz. Site içinde bulunan mükemmelliği yok eden bir görsel.
Daha iyi bir çalışma ile bu oranı 12-14’lere çıkabilir. Seçeceğiniz contrast oranı burada önemli. Siyah beyaz yaparsanız siteyi: 21 alacaksınız.
Direkt olarak siyah beyaz yapmak da sitenin renk kalesini oldukça düşürüyor. Bunun için 12-14 banında contrast yakalamanızı tavsiye ederim.
Renk kontrastı ile SEO arasındaki bağ buradan başlıyor. Kullanıcının bir yazıyı kolay okuması hem sizin hem de Google için önemli.
2023 yılında yapılan Google tarafından bir paylaşımda en önemli SEO faktörünün mükemmel bir site olduğu paylaşıldı. (ilerleyen günlerde kaleme alacağım) Bunun için mükemmel bir site deneyimi yaşatmak istiyorsak gözü yormayan bir renk paleti seçmeliyiz.
Renk Kontrastı ve SEO
Google tarafından yapılan açıklamaya göre renk kontrastı SEO faktörü değil. Sıralama sinyali gibi özelliği de bulunmuyor. En azından doğrudan değil. Dolaylı olarak marka itibarını etkileyen bir yapısı bulunuyor.
Renk ve SEO direkt olarak birbiri ile bağlantılı değil. Dolaylı olarak ise birbirinden etkilenen unsurlar. (Mükemmel SEO deneyimi) Google arama şefi John Mueller renk kontrastı gibi erişebilirlik adı altında bir soruyu cevaplayarak bizlere yardımcı oldu. Ona yöneltilen soru; “Erişebilirlik (renk, alt çizgi) SERP sonuçlarında bir avantaj sağlar mı?” oldu. Lakin, John şuan sağlamadığını belirtti. İleride kullanılabilir olabileceğinden siteyi mükemmel şekilde inşa etmeyi savundu.
34.38: Daha erişilebilir olan ve doğal olarak daha iyi kullanıcı deneyimi ve etkileşim sağlayan bir URL, özellikle artan yazı tipi ağırlığı, alt çizgi veya renk kontrastı gibi özelliklere sahip bağlantıları, çevreleyen metinden görsel olarak ayrılmayan bağlantılara göre herhangi bir SEO avantajı sağlar mı?
34.53: Hayır sağlamaz. Gerçek değil.
35.12: Bu, doğrudan bir sıralama faktörü olarak alıp kullanacağımız bir şey değil. En azından şimdi değil. Belki ileride kullanırız.
Youtube Video transkript
Renk kontrastı bir SEO faktörü olmasa da mükemmel bir site deneyimi kurmak için göze hoş gelen bir site ortaya koymalısınız. Örneğin; metin renkleri için siyah tercih ettiniz. Buton arka planı da siyah. Bu durumda butonların üzerinde ne yazdığını insanlar okuyamayacak. Mükemmel bir SEO gelişimini etkileyecek.
PageSpeed Insights Bağlantılar Yeterli Kontrast Oranı
Eğer web sitenizi PageSpeed aracında test ederseniz bazı renklerde şöyle bir hata alırsınız: “Arka plan ve ön plan renkleri yeterli kontrast oranına sahip değil.” Bu durum, kullanıcıların düşük kontrastlı metni okumakta zorluk çekmesinden dolayı oluşturuldu. Eğer yazı tipi renginiz ile arka plan renk kontrast oranınız uyuşmuyorsa ortaya çıkar.
- Yazı tipi rengini değiştirmelisiniz
- Arka plan rengini değiştirmelisiniz
İki seçenek bulunuyor. Bu seçenekleri renk kontrastı bulma ile bulabilir ve geliştirebilirsiniz. Kullanıcı etkisi ciddi olarak ölçülür. PageSpeed yeterli kontrast hakkında açık bir makalede paylaşmıştır.
SerachPilot tarafından yapılan bir test detayları daha iyi ortaya çıkarttı. Huni test ile renkli bağlantıların tıklanma oranı ile ilgili bir çalışma yapıldı. Dönüşüm oranlarında olumsuzluk yaşadığı tespit edildi.
Kullanıcı deneyimini en üst seviyede oluşturmak ve mükemmel bir site yapısıyla SEO deneyimini artırmak gerekiyor. Renk kontrastı şuan bir SEO faktörü değil. İleri de erişebilirlik ve kontrast oranının bir avantaj getirip getirmeyeceğini bilmiyoruz.
