Tasarımda Kontrast Nasıl Kullanılır? Görsel Hiyerarşi ve WCAG Kontrast Oranları

Tasarımda kontrast nedir?

Tasarımda kontrast, bir sayfadaki öğeler arasındaki bilinçli farktır: açık ile koyu, büyük ile küçük, kalın ile ince, dolu ile boş. Bu fark gözün nereye bakacağını belirler, önemli bilgiyi öne çıkarır ve metnin okunmasını mümkün kılar. Web tasarımında ayrıca WCAG kontrast oranlarıyla ölçülebilir bir erişilebilirlik şartıdır.

2012'den beri web projelerinde çalışıyorum ve bir arayüzün "neden dağınık durduğu" sorusunun cevabı çoğu zaman aynı çıkıyor: her şey aynı yükseklikte bağırıyor ya da her şey aynı sessizlikte kalıyor. Bu yazıda kontrastı iki yönüyle ele alıyorum. İlki görsel hiyerarşi, yani tasarımın okura yol göstermesi. İkincisi W3C'nin tanımladığı ölçülebilir oranlar. Renklerin duygusal etkisini merak ediyorsanız web tasarımında renk psikolojisi yazıma bakabilirsiniz; burada renkten çok farkın kendisine odaklanıyorum.

Kontrast bir sayfada neden bu kadar önemli?

Ziyaretçi bir sayfaya girdiğinde metni baştan sona okumaz, önce tarar. Bu taramada gözü durduran şey farktır. Başlık gövde metninden belirgin biçimde büyükse, düğme çevresinden ayrışıyorsa ve fiyat öne çıkıyorsa, okur birkaç saniyede sayfanın ne sunduğunu anlar.

Kontrast zayıf olduğunda ise üç sorun birlikte gelir:

• Okunabilirlik düşer: açık gri metin, güneş altındaki telefonda neredeyse kaybolur.
• Öncelik kaybolur: her öğe aynı ağırlıkta olduğu için okur neye tıklayacağını bilemez.
• Erişilebilirlik zarar görür: az gören, renk körlüğü olan ya da yaşı ilerlemiş kullanıcılar içeriğe ulaşamaz.

Dolayısıyla kontrast bir süs değil, iletişimin taşıyıcısıdır. Üstelik bu fark, markanın ne kadar özenli olduğunu da sessizce anlatır. Okunmayan bir fiyat tablosu, ürün ne kadar iyi olursa olsun güven kaybettirir.

Düşük kontrast en çok kimleri etkiler?

Kontrast sorununu çoğu zaman "az sayıda kullanıcının derdi" diye düşünürler. Oysa etkilenen kitle sandığınızdan çok daha geniş. Az gören kullanıcılar, renk körlüğü olan kişiler ve katarakt gibi göz rahatsızlıkları yaşayanlar ilk akla gelen gruplardır. Ancak liste bununla bitmiyor.

• Yaşı ilerleyen kullanıcılar: göz yaşla birlikte daha fazla ışığa ve daha net farka ihtiyaç duyar.
• Mobil kullanıcılar: dışarıda, güneş altında ya da düşük parlaklıkta ekrana bakan herkes.
• Düşük kaliteli ekran kullananlar: ucuz monitörler ve eski telefonlar renkleri soluk gösterir.
• Yorgun ya da acele eden okurlar: gün sonunda ekrana bakan biri de aslında geçici olarak zorlanan bir kullanıcıdır.

Yani tasarımda kontrast, azınlık için yapılan bir iyilik değil; neredeyse herkesin bir noktada ihtiyaç duyduğu bir özelliktir. Bu bakış açısı, müşteriyle yapılan "biraz daha soluk olsa daha şık olur" tartışmasını da kolaylaştırır. Çünkü konu estetik tercihten çıkıp ziyaretçinin gerçek kullanım koşuluna döner.

Görsel hiyerarşiyi kontrastla nasıl kurarsınız?

Görsel hiyerarşi, sayfadaki bilgilerin önem sırasına göre dizilmesidir. Kontrast bu sıralamanın ana aracıdır. Bir öğeyi öne çıkarmak için onu çevresinden farklı yaparsınız; geri planda tutmak için de çevresine benzetirsiniz.

Pratikte ben bir sayfayı üç katmanda düşünüyorum:

1. Birinci katman: ana mesaj ve ana eylem. En yüksek kontrast buraya aittir.
2. İkinci katman: destekleyici başlıklar, ara başlıklar, kısa açıklamalar.
3. Üçüncü katman: yardımcı bilgi, dipnot, meta veriler. Kontrastı düşüktür ama yine de okunaklı kalmalıdır.

Burada kritik nokta şu: üçüncü katmanın sessiz olması, okunaksız olması anlamına gelmez. Pek çok tasarımcı ikincil metni o kadar soluklaştırır ki erişilebilirlik sınırının altına düşer. Bu nedenle hiyerarşiyi yalnızca açık griyle kurmak yerine boyut, ağırlık ve boşluğu birlikte kullanmanızı öneririm. Böylece renk oranını korurken sıralamayı da netleştirirsiniz.

Basit bir test de işe yarar: ekrana bir adım geriden bakın ya da gözlerinizi kısın. Hâlâ ilk fark ettiğiniz şey ana mesajsa hiyerarşi doğru kurulmuştur.

Kontrast türleri nelerdir?

Kontrast denince çoğu kişinin aklına yalnızca siyah ile beyaz gelir. Oysa tasarımcının elinde çok daha geniş bir araç kutusu var:

• Ton (açıklık) kontrastı: açık ve koyu değerler arasındaki fark. Okunabilirliği en çok belirleyen türdür.
• Renk tonu kontrastı: mavi ile turuncu gibi farklı renklerin yan yana gelmesi.
• Boyut kontrastı: büyük başlık ile küçük gövde metni arasındaki oran.
• Ağırlık kontrastı: kalın ve ince yazı kalınlıkları.
• Biçim kontrastı: yuvarlak düğme ile köşeli kartlar gibi şekil farkları.
• Boşluk kontrastı: kalabalık bir alanın yanında bırakılan geniş boşluk.
• Hareket kontrastı: sabit bir sayfada tek hareketli öğe. Ölçülü kullanmak şartıyla güçlüdür.

Bu türleri tek tek değil, birlikte düşünmelisiniz. Örneğin bir düğmeyi hem renk hem biçim hem de çevresindeki boşlukla ayırırsanız, renk algısı zayıf bir kullanıcı da onu fark eder. Ayrıca bir türü abartmak diğerlerini gereksiz kılmaz; dengeyi kurmak asıl iştir.

Bir e-ticaret ürün sayfasını düşünün. Ürün adı büyük ve kalın, fiyat koyu ve belirgin, sepete ekle düğmesi ise sayfadaki tek dolgulu ve canlı renkli öğe olsun. Kargo bilgisi ve iade koşulları daha küçük ama yine okunaklı bir gri tonda dursun. Bu düzende okur, hiçbir yönlendirme metni okumadan önce ürünü, sonra fiyatı, ardından düğmeyi görür. İşte tasarımda kontrast, türleri doğru sırayla birleştirdiğinizde tam olarak bunu sağlar: okurun gözünü sizin belirlediğiniz rotada yürütür.

Renk kontrastı ile ton kontrastı arasındaki fark nedir?

Bu ayrım, uygulamada en çok karıştırılan konudur. İki renk birbirinden çok farklı görünebilir ama açıklık değerleri birbirine yakınsa metin yine okunaksız kalır. Kırmızı üzerine yeşil yazı buna klasik bir örnektir: renk tonları zıt, ancak açıklıkları benzer. Üstelik kırmızı ve yeşil ayrımı, renk körlüğünün en yaygın biçiminde zorlaşır.

WCAG'ın kullandığı ölçü de renk tonuna değil, bağıl parlaklığa (relative luminance) dayanır. Yani formül rengin ne kadar "canlı" olduğuyla değil, ne kadar açık ya da koyu olduğuna bakar. Bu yüzden canlı bir sarı ile beyaz arasındaki oran, gözünüze ne kadar parlak gelirse gelsin çok düşük çıkar.

Benim önerim şu: bir renk paletini değerlendirirken tasarımı bir kez de gri tonlamaya çevirin. Gri görünümde birbirine karışan iki öğe, gerçekte de pek çok kullanıcı için karışıyordur. Bu hızlı kontrol, renk seçimini duygudan çıkarıp ölçülebilir bir zemine taşır. Renklerin HEX ve RGB karşılıklarını görmek için HTML renk kodları aracını kullanabilirsiniz.

WCAG kontrast oranı nedir ve nasıl hesaplarsınız?

WCAG kontrast oranı, ön plan rengi ile arka plan rengi arasındaki parlaklık farkını tek bir sayıyla ifade eder. W3C'nin tanımına göre formül şöyledir: (L1 + 0,05) / (L2 + 0,05). Burada L1 açık rengin, L2 ise koyu rengin bağıl parlaklığıdır.

Sonuç 1:1 ile 21:1 arasında bir değer alır. Aynı iki renk 1:1 verir; saf siyah ile saf beyaz ise 21:1 ile en yüksek değeri verir. Bu arada bir ayrıntı önemli: W3C, hesaplanan değerin yuvarlanmaması gerektiğini açıkça belirtiyor. Örneğin 4,499:1 sonucu 4,5:1 eşiğini karşılamaz.

Somut örnekler vermek gerekirse:

• Beyaz zemin üzerinde #767676 gri, yaklaşık 4,54:1 ile normal metin eşiğini geçer.
• Beyaz zemin üzerinde #777777 ise yaklaşık 4,48:1 ile eşiğin hemen altında kalır.
• Beyaz zemin üzerinde #595959 yaklaşık 7:1 verir ve en sıkı seviyeyi karşılar.

Gördüğünüz gibi gözle neredeyse ayırt edemeyeceğiniz iki gri, standart açısından farklı sonuç veriyor. Bu nedenle kontrastı tahminle değil ölçümle değerlendirmelisiniz. Hesabı elle yapmanıza gerek yok; renk kontrast kontrolü aracımıza iki rengi girdiğinizde oran ve geçtiği seviyeler anında çıkar.

Kontrastı ölçerken sık yapılan bir hata daha var: tasarımcılar yalnızca ana metni kontrol edip küçük ayrıntıları atlıyor. Oysa çerez bandındaki metin, form altındaki yardım yazısı, fiyatın yanındaki "KDV dahil" notu ve alt bilgi bağlantıları da aynı kurala tabidir. Bu küçük metinler genellikle en soluk ve en küçük olanlardır; dolayısıyla eşiğin altına en sık onlar düşer. Kontrol listenize bu alanları ayrıca eklemenizi öneririm.

Metin için hangi kontrast oranları gerekir?

WCAG 2.2, metin kontrastını iki seviyede tanımlar. AA seviyesi pek çok yasal düzenlemenin ve kurumsal politikanın referans aldığı temel seviyedir. AAA ise daha sıkı, ideal hedeftir. Aşağıdaki tablo resmi W3C 1.4.3 Contrast (Minimum) açıklamasına ve ilgili ölçütlere dayanıyor:

"Büyük metin" tanımı sık karışır. W3C, 18 punto ve 14 punto kalının ekranda yaklaşık 24 piksel ve 18,5 piksele karşılık geldiğini belirtiyor. Yani 16 piksellik normal gövde metni için her zaman 4,5:1 hedeflemelisiniz. Erişilebilirliğin genel çerçevesi için web erişilebilirliği ve WCAG standartları yazıma göz atabilirsiniz.

Düğmeler, ikonlar ve form alanlarında kontrast nasıl olmalı?

Kontrast şartı yalnızca metinle sınırlı değil. WCAG 2.1 ile gelen ve 2.2'de de yer alan 1.4.11 Metin Dışı Kontrast ölçütü, arayüz bileşenleri ile anlam taşıyan grafikler için 3:1 oranı ister. Kapsam şöyle:

• Form alanının kenarlığı, kullanıcının alanı fark etmesi için gerekliyse.
• Onay kutusu, açma kapama anahtarı ve seçili durum göstergeleri.
• Klavye odak göstergesi (focus).
• Tek başına anlam taşıyan ikonlar, örneğin telefon ya da arama ikonu.
• Grafiklerdeki çizgiler ve anlamı anlamak için gereken dilimler.

Uygulamada en sık gördüğüm hata, beyaz zemindeki açık gri form kenarlıklarıdır. Kullanıcı alanın nerede başladığını göremez ve formu doldurmak zorlaşır. Benzer şekilde tarayıcının varsayılan odak çerçevesini kaldırıp yerine soluk bir gölge koymak da klavye kullanıcılarını yolda bırakır.

Öte yandan pasif, yani o an kullanılamayan düğmeler bu şarttan muaftır. Ancak pasif görünümü aşırı soluk yaparsanız kullanıcı düğmenin neden çalışmadığını anlamayabilir. Bu yüzden kısa bir açıklama metni eklemek iyi bir pratiktir. Dönüşüm odaklı düğme tasarımı için CTA butonu örnekleri yazısına da bakabilirsiniz.

Bilgiyi yalnızca renkle vermek neden sorun yaratır?

WCAG'ın 1.4.1 Renk Kullanımı ölçütü, rengin bilgiyi aktaran tek görsel araç olmamasını ister. Sebep basit: renk körlüğü olan bir kullanıcı ya da ekranı gri tonlamada kullanan biri, yalnızca renge dayanan farkı göremez.

En yaygın örnekler şunlar:

• Hatalı form alanını yalnızca kırmızı kenarlıkla belirtmek.
• Metin içindeki bağlantıları yalnızca renk farkıyla ayırıp alt çizgiyi kaldırmak.
• Grafikte serileri yalnızca renkle ayırmak.
• Stok durumunu yalnızca yeşil ya da kırmızı noktayla göstermek.

Çözüm ise ikinci bir işaret eklemektir. Hata mesajını metinle yazarsınız, bağlantıya alt çizgi ya da kalınlık eklersiniz, grafikte desen veya doğrudan etiket kullanırsınız. Böylece renk, bilgiyi tek başına taşımaz; onu destekler. Bu kural kontrast oranından ayrıdır ama pratikte birlikte ele almanız gerekir, çünkü ikisi de aynı kullanıcıyı korur.

Tasarımda kontrast hatalarından en sık hangilerini görüyorum?

Denetlediğim sitelerde aynı hatalar tekrar tekrar karşıma çıkıyor. Bunların çoğu kötü niyetten değil, "şık görünsün" kaygısından doğuyor:

1. Açık gri gövde metni: modern görünsün diye #999 gibi tonlar seçmek. Beyaz zeminde bu değer eşiğin çok altında kalır.
2. Yer tutucu metni etiket yerine kullanmak: form alanındaki soluk örnek metin, kullanıcı yazmaya başlayınca kaybolur ve zaten düşük kontrastlıdır.
3. Fotoğraf üzerine doğrudan yazı: görselin açık bölgesine denk gelen beyaz metin kaybolur.
4. Marka renginde düğme metni: açık turkuaz düğme üzerine beyaz yazı gibi.
5. Her şeyi vurgulamak: sayfada beş farklı parlak renk ve üç ayrı ana düğme. Sonuçta hiçbiri öne çıkmaz.
6. Hover ve odak durumunu unutmak: durum değişince kontrastın düştüğünü kimse test etmez.

Son madde özellikle önemli. Tasarım dosyasında her şey kusursuz durur; ancak canlı sitede fare üzerine geldiğinde düğme metni arka planla birleşebilir. Bu nedenle kontrolü yalnızca tasarım aracında değil, tarayıcıda da yapmalısınız. Kapsamlı bir kontrol için UX audit rehberimdeki adımları da takip edebilirsiniz.

Tipografide kontrastı nasıl kullanmalısınız?

Tipografi, rengi hiç değiştirmeden güçlü bir kontrast kurmanın en etkili yoludur. Başlık ile gövde metni arasındaki boyut oranı, okurun metni taramasını kolaylaştırır. Örneğin 16 piksellik gövde metnine karşı 36 ile 44 piksel arası bir ana başlık, belirgin ama bağırmayan bir fark yaratır.

Ağırlık da aynı işi görür. Kalın bir ara başlık, normal ağırlıktaki paragrafın üstünde kendiliğinden öne çıkar. Bununla birlikte ince (light ya da thin) yazı kalınlıklarına dikkat etmelisiniz. İnce bir fontta harf gövdesi çok az piksel kaplar; bu yüzden kontrast oranı teknik olarak yeterli olsa bile okuma zorlaşır.

İki yazı ailesini eşleştirmek de bir kontrast kararıdır. Serifli bir başlık fontu ile serifsiz bir gövde fontu, birbirinden ayrışarak hiyerarşiyi güçlendirir. Ancak birbirine çok benzeyen iki font seçerseniz fark ne kontrast ne de uyum yaratır; sadece dağınıklık hissi verir. Font seçimini derinlemesine ele aldığım web tipografisi yazısında bu eşleştirmeleri ayrıntılı anlattım.

Boşluk ve yerleşimle kontrastı nasıl sağlarsınız?

Boşluk, en ucuz ve en az kullanılan kontrast aracıdır. Kalabalık bir sayfada bir öğenin çevresine geniş boşluk bıraktığınızda, o öğe renk değiştirmeden öne çıkar. Lüks markaların sitelerinde az ürün ve çok boşluk görmeniz bu yüzdendir.

Yerleşimde de benzer bir mantık var. Sayfanın büyük kısmı sola hizalıysa ortaya hizalı tek bir blok dikkat çeker. Kartlar eşit boyuttaysa daha büyük tek bir kart öne çıkar. Yani kontrast, bir düzen kurup o düzeni bilinçli olarak bir noktada bozmaktır.

Burada bir uyarı eklemeliyim: düzeni bozmak bir kez işe yarar. Her bölümde başka bir istisna yaratırsanız okur kuralı hiç öğrenemez ve istisna da istisna olmaktan çıkar. Bu nedenle sade bir sistem kurup vurguyu gerçekten önemli olan birkaç yere saklamayı öneririm. Sade bir sistemin nasıl kurulacağını minimalist web tasarım yazısında ayrıca anlattım.

Marka renkleri düşük kontrastlıysa ne yapmalısınız?

Bu, kurumsal projelerde en sık karşılaştığım durum. Markanın ana rengi açık bir yeşil, turuncu ya da sarı olabilir ve beyaz yazıyla bir araya geldiğinde 4,5:1 eşiğini geçemez. Logoyu değiştirmek genellikle seçenek değildir; zaten logodaki metin bu şarttan muaftır. Ancak arayüzdeki düğmeler ve metinler muaf değildir.

Benim uyguladığım çözümler şunlar:

• Koyu varyant türetmek: marka renginin aynı tonunu daha koyu bir değerle kullanmak. Göz aynı aileyi tanır, oran da yükselir.
• Metin rengini ters çevirmek: açık düğme üzerinde beyaz yerine koyu lacivert ya da siyah metin.
• Rengi yüzeye taşımak: marka rengini metinde değil, geniş alanlarda, ikonlarda ve ayırıcılarda kullanmak.

Bu kararları en başta, marka kimliği aşamasında vermek çok daha kolaydır. Ekibimle bir marka kimliği çalışmasında paleti belirlerken her rengin beyaz ve koyu zemin üzerindeki oranını baştan tabloya döküyoruz. Böylece sonradan web sitesinde "bu renk olmadı" tartışması yaşanmıyor.

Karanlık modda tasarımda kontrastı nasıl ayarlamalısınız?

Karanlık mod, açık temanın renklerini tersine çevirmekten ibaret değildir. Saf siyah zemin üzerinde saf beyaz metin 21:1 ile en yüksek oranı verir; ancak uzun metinlerde bu sert fark bazı okurları yorabilir. Bu yüzden pek çok tasarım sistemi koyu gri bir zemin tercih eder. Örneğin Google'ın Material Design rehberi, karanlık tema yüzeyi için #121212 tonunu önerir.

Karanlık modda dikkat etmeniz gereken noktalar şöyle:

• Açık temada geçen marka rengi, koyu zeminde çok karanlık kalabilir. Her iki tema için ayrı ölçüm yapmalısınız.
• Gölgeler koyu zeminde neredeyse kaybolur. Katmanları gölge yerine açıklık farkıyla ayırın.
• Soluk ikincil metin karanlık modda daha da kaybolur; oranı yine en az 4,5:1 tutun.

Kısacası iki tema, iki ayrı palet demektir. Her birini kendi zemininde test etmeden yayına almamalısınız. Bizim sitemizde de açık ve koyu görünüm için renkleri ayrı ayrı tanımladık; kullanıcıların kontrast tercihlerini nasıl desteklediğimizi erişilebilirlik beyanımızda görebilirsiniz.

Görsel üzerindeki metinde kontrastı nasıl korursunuz?

Büyük bir kapak fotoğrafının üzerine başlık yazmak etkileyici durur. Sorun şu ki fotoğraf tek renkli değildir. Metnin bir kısmı koyu bir bölgeye, bir kısmı ise gökyüzü gibi açık bir bölgeye denk gelebilir. Bu durumda oran harften harfe değişir.

İşe yarayan yöntemler şunlardır:

1. Yarı saydam katman: fotoğrafın üzerine koyu, yarı saydam bir örtü koymak.
2. Metin kutusu: başlığı düz renkli bir panel içine almak.
3. Degrade: metnin bulunduğu tarafta koyulaşan bir geçiş eklemek.
4. Kompozisyon seçimi: metin alanında sade, tek tonlu bölgesi olan fotoğraf seçmek.

Ölçüm yaparken metnin arkasındaki en açık noktayı referans alın. Çünkü en kötü nokta, okunabilirliğin sınırını belirler. Ayrıca mobil ekranda görselin kırpılma biçimi değişir; masaüstünde güvenli olan yerleşim telefonda metni açık bir bölgeye itebilir. Bu yüzden her iki görünümü de ayrı kontrol etmelisiniz.

Tasarımda kontrast fazla olabilir mi?

Evet, olabilir. Tasarımda kontrast bir dengedir ve aşırısı da iletişimi bozar. Her öğe yüksek kontrastlıysa göz soluklanacak yer bulamaz; sayfa yorucu ve saldırgan bir hal alır. Üstelik her şey önemli durursa, aslında hiçbir şey öne çıkmaz.

Bu noktada iki kavramı ayırmak gerekiyor. Birincisi okunabilirlik kontrastı: metin ile zemini arasındaki oran. Bunu yükseltmek neredeyse her zaman iyidir ve alt sınırın altına inmemelisiniz. İkincisi vurgu kontrastı: öğeler arasındaki önem farkı. Bunu ise az ve bilinçli kullanmalısınız.

Pratik bir kural olarak her ekran görünümünde tek bir ana eylem, en fazla iki vurgu rengi ve sınırlı sayıda başlık seviyesi öneririm. Örneğin bir hizmet sayfasında "Teklif alın" düğmesi en yüksek kontrastlı öğe olmalıdır; ikincil bağlantılar ise daha sakin bir stille yer almalıdır. Böylece okur, siz söylemeden neyin önemli olduğunu anlar.

Kontrastı adım adım nasıl test edersiniz?

Kontrast denetimini bir kez yapıp unutmak yerine tasarım sürecinin bir adımı haline getirmelisiniz. Benim izlediğim sıra şöyle:

1. Paleti tabloya dökün: her metin ve zemin çiftinin oranını ölçün. Hangi çiftlerin yalnızca büyük metinde kullanılabileceğini not edin.
2. Bileşenleri ölçün: düğme, form alanı, onay kutusu ve odak göstergesinin çevresine göre 3:1 oranını kontrol edin.
3. Durumları test edin: hover, odak, seçili, hata ve pasif durumlarının her birine ayrı bakın.
4. Gri tonlama kontrolü: sayfayı gri tonlamaya çevirip hiyerarşinin korunduğunu görün.
5. Otomatik tarama: Lighthouse gibi araçların erişilebilirlik denetimi, kontrast hatalarını liste halinde verir.
6. Gerçek cihaz: telefonu parlak ortamda, düşük ekran parlaklığında deneyin.

Otomatik araçlar her şeyi yakalamaz. Örneğin görsel üzerindeki metni ya da gradyan zeminleri çoğu zaman doğru ölçemezler. Bu nedenle otomatik taramayı elle kontrolle tamamlamanız gerekir. Tekil renk çiftleri için renk kontrast kontrolü aracı en hızlı yoldur; metnin dil yapısını da kontrol etmek isterseniz okunabilirlik analizi aracı işinize yarar.

Bir de şunu hatırlatayım: renk paleti değiştiğinde ölçümü yenilemeniz gerekir. Kampanya dönemlerinde eklenen yeni bir banner rengi ya da yeni bir ürün etiketi, kurduğunuz dengeyi sessizce bozabilir. Bu yüzden tasarımda kontrast kontrolünü tek seferlik bir proje değil, düzenli bir bakım işi olarak görmelisiniz.

Tasarımda kontrast dönüşümü ve SEO'yu nasıl etkiler?

Önce net olayım: Google, renk kontrastını doğrudan bir sıralama sinyali olarak kullandığını açıklamadı. Dolayısıyla "kontrastı düzelttim, sıralamam yükselecek" beklentisi doğru değil. Ancak dolaylı etkiler gerçektir ve bunlar önemlidir.

Okunamayan bir sayfada ziyaretçi aradığını bulamadan sayfayı kapatır. Düğmeyi fark etmeyen kullanıcı teklif formuna ulaşmaz. Bu davranışlar dönüşüm oranınızı doğrudan düşürür. Ayrıca Lighthouse'un erişilebilirlik puanı kontrast hatalarını içerir ve bu puan, kalite konusunda size somut bir gösterge sunar.

Yasal boyut da giderek ağırlık kazanıyor. Örneğin Avrupa Birliği'nde Avrupa Erişilebilirlik Yasası 28 Haziran 2025'ten itibaren belirli dijital hizmetleri kapsıyor. AB'ye satış yapan işletmeler için WCAG uyumu bu nedenle yalnızca iyi bir alışkanlık değil, bir yükümlülük haline geliyor. Kısacası tasarımda kontrast; kullanıcıyı, dönüşümü ve hukuki riski aynı anda ilgilendiren bir karardır.

Ekibimle bir sitede kontrastı nasıl ele alıyoruz?

Bir web tasarım projesine başladığımızda kontrastı son aşamada düzelteceğimiz bir ayrıntı olarak görmüyoruz. Palet belirlendiği gün, her renk çiftinin oranını ölçüyor ve hangi çiftin nerede kullanılacağını kurala bağlıyoruz. Böylece tasarım ilerledikçe sürpriz çıkmıyor.

Ardından hiyerarşiyi kuruyoruz. Her sayfa için tek bir ana eylem belirliyor, en yüksek kontrastı ona ayırıyoruz. İkincil öğeleri ise renkten çok boyut ve boşlukla ayırıyoruz. Bu yaklaşım hem sayfayı sakinleştiriyor hem de erişilebilirlik sınırlarının altına düşme riskini azaltıyor.

Son olarak canlı ortamda test ediyoruz: farklı cihazlar, karanlık mod, klavye ile gezinme ve otomatik tarama. Sitenizin okunabilirliğinden emin değilseniz ilk adım olarak kendi renklerinizi araçla ölçmenizi öneririm. Sonuçlar birden fazla noktada eşiğin altındaysa, yapıyı birlikte ele almak için bizimle iletişime geçebilirsiniz.