WCAG 2.2 Renk Kontrastı ve Erişilebilirlik: Dijital Görsellerde Renk Körlüğü Simülasyonu ve Testi

1. Renk Görme Bozukluklarını Anlamak: Protanopi, Döteranopi ve Tritanopi

İnsan gözünün renk algısı, retinada yer alan ve farklı ışık dalga boylarına duyarlı üç özel koni hücresine dayanır: Uzun dalga boyu (L-koni) kırmızıyı, orta dalga boyu (M-koni) yeşili, kısa dalga boyu (S-koni) ise mavi ışığı algılar. Renk görme bozukluğu, bu koni hücrelerinden birinin veya birkaçının genetik olarak bulunmaması, eksik çalışması veya farklı bir dalga boyuna kayması durumunda ortaya çıkar.

Protanopi ve Protanomali (Kırmızı Körlüğü): L-koni hücrelerinin bulunmamasından veya işlevini yitirmesinden kaynaklanır. Protanopiye sahip bireyler kırmızı tonlarını koyu kahverengi, çamur rengi veya neredeyse siyah olarak algılar. Kırmızı ışık dalgaları retinayı uyaramadığı için kırmızı renkler çok karanlık görünür. Kullanıcı arayüzlerinde parlak kırmızı bir 'Hesabı Sil' butonu, bir protanopi kullanıcısına koyu gri veya siyah gibi görünebilir.

Döteranopi ve Döteranomali (Yeşil Körlüğü): Tüm renk körlüğü vakalarının %60'ından fazlasını oluşturan en yaygın türdür. M-koni hücrelerinin eksikliğinden kaynaklanır. Bu bireyler yeşil, sarı, turuncu ve kırmızı arasındaki farkı ayırt etmekte son derece zorlanır. Bir borsa grafiğinde 'Kâr' çizgisinin yeşil, 'Zarar' çizgisinin kırmızı yapıldığı bir arayüz, döteranopi hastası için aynı haki-sarı tonunda iki çizgiye dönüşür.

Tritanopi ve Tritanomali (Mavi-Sarı Körlüğü): Kadın ve erkeklerde eşit oranda, yaklaşık 10.000 kişide bir görülen nadir bir durumdur; S-koni hücrelerinin eksikliğinden doğar. Tritanopi hastaları mavi ile yeşili, sarı ile mor veya pembeyi birbirine karıştırır. Görsellerinizin ve arayüzlerinizin bu üç farklı gözden nasıl göründüğünü canlı olarak test etmek için ücretsiz Renk Körlüğü Simülatörü aracımızı deneyebilirsiniz.

2. WCAG 2.2 Kontrast Matematiği: Bağıl Parlaklık ve Kontrast Oranları

Web İçeriği Erişilebilirlik Yönergeleri (WCAG 2.2), renk kontrastını insanların sübjektif renk zevklerine göre değil; 'Bağıl Parlaklık' (Relative Luminance - L) adı verilen katı bir matematiksel formülle hesaplar. Bağıl parlaklık, en koyu siyah için 0, en açık beyaz içinse 1 değerini alan fotometrik bir ölçümdür.

Bağıl Parlaklık Formülü: Parlaklığı hesaplamak için sRGB renk kanalları (0-255 arası R, G, B) önce gama düzeltmesinden arındırılır: Kanal değeri 255'e bölünür; eğer C <= 0.04045 ise C_lin = C / 12.92, aksi halde C_lin = ((C + 0.055) / 1.055) ^ 2.4 alınır. Ardından insan gözünün duyarlılığına göre parlaklık hesaplanır: 'L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin'. Yeşil kanalın algılanan parlaklığın %71'inden sorumlu olması insan retinasının biyolojik yapısını yansıtır.

Kontrast Oranı Formülü: Daha açık rengin parlaklığı (L1) ile daha koyu rengin parlaklığı (L2) arasındaki oran şu formülle bulunur: '(L1 + 0.05) / (L2 + 0.05)'. Bu matematiksel işlem 1:1 (aynı renk, sıfır kontrast) ile 21:1 (saf beyaz üzerine saf siyah) arasında değişen evrensel bir oran üretir.

3. Standart Eşik Değerleri: WCAG AA (4.5:1) ve AAA (7:1) Uyumluluk Hedefleri

WCAG 2.2 erişilebilirlik yönergeleri uyumluluğu üç kademede sınıflandırır: Seviye A (asgari düzey), Seviye AA (küresel çapta kurumsal siteler ve kamu kurumları için yasal zorunluluk) ve Seviye AAA (tıbbi yazılımlar ve özel erişilebilirlik arayüzleri için altın standart).

Seviye AA Gereksinimleri: Standart gövde metinlerinde (18pt normal veya 14pt kalın yazı altındaki tüm metinler), metin ile zemin arasındaki kontrast oranı en az 4.5:1 olmalıdır. Büyük başlıklarda (en az 18pt veya 14pt kalın) ve buton çerçevesi gibi temel arayüz ögelerinde bu sınır 3:1 olarak uygulanır.

Seviye AAA Gereksinimleri: Parlak güneş ışığı altında, yansımalı ekranlarda veya ileri düzey görme bozukluklarında kusursuz okunabilirlik sağlamak için; normal metinlerde en az 7:1, büyük başlıklarda ise en az 4.5:1 kontrast oranı şarttır. Tasarımlarınızdaki zayıf kontrastı güçlendirmek için tarayıcıda çalışan Kontrast Ayarla aracımızdan yararlanabilirsiniz.

4. Daltonizasyon: Gerçek Zamanlı Renk Körlüğü Düzeltme Algoritması

Dijital grafiklerde renk körlüğü simülasyonu ve düzeltmesi nasıl gerçekleştirilir? Bu süreç, görsel işleme dünyasında 'Daltonizasyon' (Daltonization) olarak bilinen ve Brettel, Viénot, Mollon (1997) ile Machado (2009) tarafından geliştirilen ileri matematiksel matris dönüşümlerine dayanır.

Aşama 1: LMS Koni Yanıtı Dönüşümü: Algoritma önce sRGB piksel değerlerini insan retinasındaki Uzun, Orta ve Kısa dalga boylu konilerin foton soğurma oranını modelleyen LMS renk uzayına çevirir: '[L, M, S]^T = M_matris * [R, G, B]^T'. Protanopi için eksik olan L değeri, renk karışıklığı çizgisi boyunca diğer kanallardan matematiksel olarak türetilir.

Aşama 2: Hata Vektörünün Kaydırılması ve Sentezi: Bir görseli renk körü bir birey için görünür kılmak (Daltonizasyon düzeltmesi); orijinal görüntü ile simüle edilmiş görüntü arasındaki fark hesaplanır. Kaybolan bu renk kontrastı, kullanıcının sorunsuz algılayabildiği mavi kanala ve parlaklık kanalına aktarılır. Böylece kayıp detaylar net bir şekilde görünür hale gelir. Renk değerlerini Renk Seçici Damlalık aracımızla inceleyebilirsiniz.

5. Pratik Arayüz (UI/UX) Tasarım Kuralları: Yalnızca Renkle Bilgi Vermeyi Aşmak

WCAG Başarı Kriteri 1.4.1 (Renk Kullanımı) kesin bir kural koyar: 'Renk; bilgi aktarmanın, bir eylemi belirtmenin, yanıt istemenin veya görsel bir ögeyi ayırt etmenin tek görsel aracı olarak kullanılamaz.' Kapsayıcı tasarım kalıplarını benimsemek, arayüzlerinizin herkes tarafından anlaşılmasını sağlar.

Kural 1: Rengi Daima Açıklayıcı Simgeler ve Metinlerle Destekleyin: Hatalı bir form alanını asla sadece kırmızı bir çerçeveyle bırakmayın. Çerçevenin yanına mutlaka bir uyarı ikonu ve açıklayıcı bir metin ekleyin ('Şifre en az bir rakam içermelidir'). Durum etiketlerinde renklerin yanına 'Aktif', 'Beklemede' veya 'İptal' gibi net metinler yazın.

Kural 2: Grafikleri Doku, Desen ve Doğrudan Etiketlerle Ayrıştırın: Çizgi grafiklerde yalnızca farklı renkler kullanmayın. Kesikli çizgiler, noktalı desenler veya veri noktalarında kare/üçgen gibi geometrik şekiller kullanın. Uzakta duran renkli lejantlar yerine çizginin hemen yanına doğrudan etiket yazın. Çubuk grafiklerde ise çapraz tarama desenleri uygulayın.

Kural 3: Tasarımlarınızı Siyah-Beyaz (Grayscale) Modunda Test Edin: Bir tasarımın erişilebilirliğini ölçmenin en kesin yolu, tüm arayüzü siyah-beyaza çevirmektir. Eğer grafikleriniz, butonlarınız ve uyarı kutularınız saf siyah-beyaz modda bile %100 anlaşılıyorsa, tasarımınız her türlü renk körlüğüne karşı kusursuzdur. Görsellerinizi tek tıkla test etmek için Gri Tonlama (Grayscale) aracımızı kullanabilirsiniz.

6. İstemci Taraflı Erişilebilirlik Denetimi ve Sunucu Yükleme Riskleri

Yayınlanmamış kurumsal ürün arayüzlerini, gizli sağlık portallarını ve bankacılık ekran tasarımlarını çevrim içi erişilebilirlik sitelerinde denetlerken görselleri sunucuya yüklemek ciddi bir güvenlik açığı oluşturur.

2run.tools, tüm renk körlüğü simülasyonlarını ve parlaklık hesaplamalarını doğrudan tarayıcınızın kendi belleğinde (HTML5 Canvas ve TypedArrays ile) çalıştırarak tam gizlilik sunar. Tasarım dosyalarınız bilgisayarınızdan asla ayrılmaz.