Renk Kontrast (WCAG) Kontrolü

Kontrast Oranı Nedir?

Kontrast oranı, iki rengin parlaklık farkını 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasında ölçer. WCAG standardı, metnin arka planından yeterince ayrışması için minimum eşikler tanımlar. Bu araç resmî WCAG 2.1 formülünü birebir uygular.

AA ve AAA Seviyeleri

Normal metin için AA seviyesi 4,5:1, daha katı olan AAA seviyesi ise 7:1 oranını şart koşar. 18pt (yaklaşık 24px) veya 14pt kalın ve üzeri "büyük metin" sayılır ve eşiği AA için 3:1'e düşer. Buton kenarlığı, form çerçevesi gibi arayüz bileşenleri için de 3:1 gerekir.

Bu Sadece Görme Engelliler İçin Değil

Yetersiz kontrast; yaşa bağlı görme kaybı yaşayan kullanıcıları, renk körlüğü olanları ve güneş altında telefonuna bakan herkesi etkiler. Düşük kontrast bir "estetik tercih" değil, ölçülebilir bir kullanılabilirlik sorunudur.

Marka Renginiz Kalıyorsa Ne Yapmalı?

Marka renginizi değiştirmek zorunda değilsiniz. Onu büyük başlıklarda, buton zeminlerinde veya ikonlarda kullanın; küçük gövde metninde ise daha koyu bir varyantını tercih edin. Çoğu marka için bu, tek bir ton koyulaştırmakla çözülür.

Renk Paletinizi Oluşturun

Renk varyantları türetmek için Renk Dönüştürücümüzü kullanabilirsiniz. Erişilebilir ve dönüşüm odaklı arayüzler için UI/UX tasarım hizmetimize göz atın.

Kontrast Oranı Nasıl Hesaplanır?

Hesaplamanın ilk adımı, her rengin göreli parlaklığını bulmaktır. Rengin kırmızı, yeşil ve mavi değerleri önce 0 ile 1 arasına ölçeklenir, ardından ekranların renkleri gösterme biçimini dengeleyen bir dönüşümle doğrusal değerlere çevrilir. Bu doğrusal değerler, insan gözünün her renge olan hassasiyetine göre ağırlıklandırılarak toplanır. Göz yeşile en hassas, maviye en az hassas olduğu için yeşil kanalın ağırlığı en yüksek, mavi kanalın ağırlığı en düşüktür.

İkinci adımda iki rengin göreli parlaklıkları karşılaştırılır. Daha açık rengin parlaklığına küçük bir sabit eklenir, aynı sabit eklenmiş koyu rengin parlaklığına bölünür ve kontrast oranı ortaya çıkar. Bu formül, yan yana koyulduğunda farklı görünen ama parlaklıkları birbirine yakın renklerin neden düşük kontrast verdiğini açıklar. Örneğin canlı bir kırmızı ile canlı bir yeşil çok farklı görünse de parlaklıkları yakınsa birbirinin üzerinde zor okunur. Arayüzünüzdeki renk geçişlerinde ve gölgelerde kontrastı korumak için CSS gradient ve gölge oluşturucumuzu birlikte kullanabilirsiniz.

Sitenizde Kontrast Denetimi Yapmak

Sitenizin kontrastını sistemli biçimde kontrol etmek için önce kullanılan tüm metin ve arka plan kombinasyonlarını listeleyin. Gövde metni, başlıklar, bağlantı renkleri, buton metinleri, form alanlarındaki yer tutucu metinler, alt bilgi bölümü ve hata mesajları bu listenin temel kalemleridir. Özellikle alt bilgi ve yer tutucu metinler sık sık açık gri tonlarda tasarlanır ve standardın altında kalır. Her kombinasyonu araca girerek hangi seviyeyi geçtiğini bir tabloya not edin.

Etkileşim durumlarını da kontrol etmeyi unutmayın. Bir bağlantının normal hali yeterli kontrasta sahipken üzerine gelindiğindeki rengi standardın altında kalabilir. Klavyeyle gezinen kullanıcılar için odak göstergesinin de arka plandan belirgin biçimde ayrışması gerekir. Denetim sonucunda çok sayıda sorun çıkıyorsa, renk sistemini parça parça düzeltmek yerine bütünsel olarak yeniden ele almak daha verimli olabilir. Erişilebilirlik ve kullanılabilirlik sorunlarını birlikte çözen bir yenileme için web sitesi yenileme hizmetimizi inceleyebilirsiniz.

Bilgiyi Yalnızca Renge Emanet Etmeyin

Yeterli kontrast tek başına erişilebilirliği sağlamaz; bilginin yalnızca renk farkıyla iletilmemesi de gerekir. Renk görme farklılığı olan kullanıcılar, örneğin kırmızı ile yeşili ayırt etmekte zorlanabilir. Bir form alanındaki hatayı yalnızca kırmızı kenarlıkla göstermek, bu kullanıcılar için hatanın fark edilmemesine yol açar. Hata mesajına bir ikon ve açıklayıcı bir metin eklemek, bilgiyi herkes için anlaşılır kılar. Bu ilke, renk algısından bağımsız olarak tüm kullanıcıların aynı bilgiye ulaşmasını sağlar.

Aynı ilke metin içindeki bağlantılar için de geçerlidir. Bağlantıları yalnızca farklı bir renkle göstermek yerine altı çizili biçimde sunmak, çevresindeki metinden ayırt edilmelerini kolaylaştırır. Grafiklerde ve tablolarda renk kodlamasının yanında etiket, desen veya simge kullanmak da bilginin herkes tarafından okunmasını sağlar. Bu ilkeler özellikle küçük ekranlarda ve güneş altında kullanılan mobil cihazlarda daha da önem kazanır. Mobil kullanıcı deneyimini merkeze alan tasarımlar için mobil uyumlu web tasarım hizmetimizi inceleyebilirsiniz.

Karanlık Modda Kontrast Dengesi

Karanlık mod tasarımında kontrast, açık temadakinden farklı bir dikkat gerektirir. Saf siyah arka plan üzerinde saf beyaz metin en yüksek kontrast oranını verse de uzun okumalarda göz yorgunluğuna ve metnin titreşiyormuş gibi algılanmasına yol açabilir. Bu nedenle karanlık modda genellikle koyu gri bir arka plan ve hafifçe kırık beyaz bir metin rengi tercih edilir. Bu kombinasyon standardı rahatlıkla karşılarken daha konforlu bir okuma deneyimi sunar.

Marka renkleri de karanlık modda yeniden ele alınmalıdır. Açık temada beyaz zemin üzerinde iyi görünen koyu bir marka rengi, koyu zemin üzerinde neredeyse kaybolabilir. Karanlık tema için marka renginizin daha açık bir tonunu kullanmak, hem marka kimliğini korur hem de yeterli kontrastı sağlar. Her iki tema için kullandığınız tüm renk kombinasyonlarını araçla ayrı ayrı test edin. Marka renginizin açık ve koyu tonlarını sistematik biçimde üretmek için renk dönüştürücü aracımızı kullanabilirsiniz.

Erişilebilirliğin İşletmenize Katkısı

Erişilebilir tasarım çoğu zaman yalnızca bir sorumluluk olarak görülür, ancak doğrudan iş sonuçlarını da etkiler. Okunması kolay bir site, daha fazla ziyaretçinin içeriği anlamasını, ürün bilgilerini okumasını ve formu tamamlamasını sağlar. Yaşı ilerleyen kullanıcılar, düşük kaliteli ekranlara sahip cihaz kullananlar ve dış mekânda telefonla gezinenler, yeterli kontrast sayesinde siteden vazgeçmeden işlemlerini tamamlayabilir. Bu da daha geniş bir kitleye ulaşmak ve dönüşüm kaybını azaltmak anlamına gelir.

Yurt dışına satış yapan işletmeler için erişilebilirlik, giderek daha fazla düzenlemenin konusu haline gelmektedir. Özellikle Avrupa pazarına hizmet veren e-ticaret sitelerinin, hedef pazardaki erişilebilirlik gerekliliklerini takip etmesi ve sitelerini buna göre değerlendirmesi önemlidir. Kontrast, bu gerekliliklerin en kolay ölçülebilen ve düzeltilebilen başlangıç noktasıdır. Uluslararası pazarlara açılırken site altyapısını bütünsel olarak planlamak için e-ihracat danışmanlığı hizmetimizi inceleyebilirsiniz. Erken davranmak, sonradan yapılacak kapsamlı düzeltmelerin maliyetini de azaltır.